Gutenberg Code Block Test, with different programming languages and adding color syntax highlighting

0
362
Gutenberg Code Block
Gutenberg Code Block

In this article, we will experiment with Gutenberg Code Block testing with different and most popular programming languages like JavaScript, Java, PHP, Python, GO, Swift, SQL and adding color syntax highlighting to make the code look better and more readable for the user on the website.

Gutenbergs Code block doesn’t support code syntax highlighting out of the box at the moment, I really hope this is fixed in the future, since the output from the code block looks just like a text file, which is not pleasing when sharing code.

So, until then we can achieve this using a plugin called Code Syntax Block.

Its a WordPress plugin which extends the core Gutenberg code block adding color syntax highlighting, more info on its website

Need help with installing this plugin – Download and Install a WordPress Plugin

Lets get started – the first programming language on my mind is –

JavaScript

<script>
var body = document.querySelector('body');
(function createDiv(){
  var div = document.createElement('div');
  div.innerHTML = 'Amazing work my Lad !';
  body.appendChild(div);
})();
</script>

HTML

<html>
<head>
<title>Test Page</title>
</head>
<body>
  <p>Test Paragraph</p>
</body>
</html>

Java

package nsv.custom.utilities;

public class Print {
	
	public Print() {}
	
	public static void println(Object message) {
		System.out.println(""+message);
	}
	public static void prettyPrint(String title, Object message) {
		System.out.println("------------ "+title+" ------------");
		System.out.println(""+message);
		System.out.println("------------ ------------ ------------");
	}
}

Swift

import UIKit

class MyProfileViewController: UIViewController {
    
    @IBOutlet weak var myProfileScrollView: UIScrollView!
    @IBOutlet weak var emailLbl: UILabel!
    @IBOutlet weak var nameLbl: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Profile"
       
        myProfileScrollView.tintColor = UIColor.orange
      
        let userDict =  UserDefaults.standard.object(forKey: "userData") as! NSDictionary
   
        self.nameLbl.text = userDict["name"] as? String
        self.emailLbl.text = userDict["email"] as? String
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

PHP

class Buildings extends REST_Controller {
  public function __construct()
  {
    parent::__construct();
    $this->load->helper(array('form', 'url'));
    $this->load->model('buildings_model');
  }
  //get all available buildings
  function allBuildings_post()
  {
    $response= $this->buildings_model->allBuildings();
    $this->response($response,200);
  }
}

Ruby

require 'test_helper'

class PrintsControllerTest < ActionController::TestCase
  setup do
    @print = prints(:one)
  end

  test "should get index" do
    get :index
    assert_response :success
    assert_not_nil assigns(:prints)
  end
end

CSS

#navigation .sub-menu:after, #navigation .sub-menu:before { border-bottom-color: rgba(0, 0, 0, 0) }
    #navigation ul ul {
        display: block!important;
        visibility: visible!important;
        opacity: 1!important;
        position: relative;
        left: 0;
        border: 0;
        width: 100%;
        top: 0;
        outline: 0;
        background: transparent;
    }
img, embed {
        max-width: 100%;
        height: auto!important;
    }

GO

package main
import "fmt"
func main() {
    fmt.Println("hello world")
}

R

install.packages(c("e1071", "C50", "ggplot2", "hexbin","descr", "caret", "e1071", "plotly"))
library(e1071)
library(hexbin)
barplot(table(mathData$Dalc), ylab='Number of Students', xlab='Workday Alcohol Consumption',
        main ='(Maths Class) Workday Alcohol Consumption',
        col=rainbow(7))

barplot(table(porData$Dalc), ylab='Number of Students', xlab='Workday Alcohol Consumption',
        main ='(Por Class)  Workday Alcohol Consumption',
        col=rainbow(7))

Python

import sys
myList = []
n = 10	# Number of top N records
for line in sys.stdin:
	# remove leading and trailing whitespace
	line = line.strip()
	# split data values into list
	data = line.split(";")

	# convert weight (currently a string) to int
	try:
		g3 = int(data[32])
	except ValueError:
		# ignore/discard this line
		continue

	# add (g3, record) touple to list
	myList.append( (g3,line) )
	# sort list in reverse order
	myList.sort(reverse=True)

	# keep only first N records
	if len(myList) > n:
		myList = myList[:n]

# Print top N records
for (k,v) in myList:
	print(v)

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.