Code fragments can be displayed with automatic syntax highlighting using the prism.js syntax highlighter. Many languages are supported and code can be indicated both inline and in separate blocks. The Gutenberg editor provides simple code blocks with no syntax highlighting. For the highlighting option, The Prismatic plugin is used and it provides a new editor block type.

Code blocks in Markdown

There are a two basic ways to get code to display in your post or page.

Inline

The first is to use an inline style. In this case, the text should be enclosed in single backtick characters if you are in a markdown block. When the page is rendered, the enclosed text will be displayed bracketed inside the HTML <code> tags and will be displayed in a distinct monospaced font. This is not always terribly useful except perhaps to refer to a variable identifier or language reserved words. In normal paragraph blocks, there is a rich text option for inline code.

Blocks

Blocks of code can be distinguished in a couple of ways. For example, in a markdown block, any markdown text that is indented by four or more characters will be displayed as a code block.

There was a young lady of Nice,
Who insisted on bathing in grease.
She slid through the house
Tormenting her spouse
Til he hid in the oven for peace.

Alternatively, it is probably better to wrap the block inside ‘fence’ characters. Three backticks or tilde characters on a line, optionally followed by a code style name are used. Having two different options for the fence characters makes it possible to include the other type inside the code block. HTML code inside a code block will render as source code and not be interpreted by the browser. If no code style is named, then none will be applied.

That very same lady, I'm told
Had a pet most uncommonly bold
Not a cat, or a dog
But a big spotted hog
That dragged her young man down the road

The exact appearance of the code block will depend on the current rendering style and language specific highlighting should help to make your code listing a little easier to understand.

Language Support

The Prism highlighter supports 50 languages and 8 different visual styles are available. This installation of WordPress can either use the markdown block to provide syntax highlighting or a special Prismatic editor block.

A markdown block rendering some c++ code looks like this:

void loop(void) {
  MDNS.update();
  server.handleClient();
}

The markdown source for that block is:

```c++
void loop(void) 
{ 
  MDNS.update(); 
  server.handleClient(); 
}
```

Note that the language is specified immediately after the backtick fence characters.

Using the Prismatic blockThe same c++ code could be entered directly into a Prismatic block without backticks. In that case, when you are editing the block, there is a section in the properties list on the right of the screen that allows you to set the language. Since the prismatic script does the highlighting, the result is essentially the same. This example also has line numbering because the block has been given the line-numbers class in the advanced section of the block properties.

void loop(void) {
  MDNS.update();
  server.handleClient();
}

Here are some other styles

Python

def getRemoteFolders():
    # Get all 1-Wire remote folders
    fname =local + "remotes"
    file = open(fname)
    folders = file.read().splitlines()
    file.close()
    return folders

Javascript

function Person() {
  // assign `this` to `self` for later
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    // `self` the expected object
    self.age++;
  }, 1000);
}

HTML in a markdown block

<html>
<body>
<h2>Hello, World!</h2>
<p>Original, no?</p>
</body>
</html>

JSON

myObj = {
  "name":"John",
  "age":30,
  "cars": {
    "car1":"Ford",
  }
 }

bash

# Create a ~/.gitignore in your user directory
cd ~/
touch .gitignore

# Exclude bin and .metadata directories
echo "bin" >> .gitignore
echo "*~" >> .gitignore
echo ".DS_Store" >> .gitignore

# Use this file as global .gitignore

git config --global core.excludesfile ~/.gitignore

LaTeX

\begin{equation} 
v = u + at  
\end{equation}  
  
\begin{equation}  
v^2 = u^2 + 2as  
\end{equation}  
  
\begin{equation}  
s = ut + 1/2at^2  
\end{equation}