SyntaxHighlighter Code Block

With the SyntaxHighlighter Code block, you can display formatted code on the front end of your site.

If you have a plugin-enabled site, please install the SyntaxHighlighter Evolved plugin to activate these features.

In this guide

Add the Syntax Highlighter Code Block

To add the SyntaxHighlighter Code block, click on the + Block Inserter icon and search for “SyntaxHighlighter Code”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /syntax on a new line and press enter to quickly add a new SyntaxHighlighter Code block.

For more, visit our detailed instructions on adding blocks.

When you click on the block, a toolbar of options will appear above it:

The Syntax Highlighter Code Block toolbar — Syntax Highlighter Code Block toolbar

The SyntaxHighlighter Code Block has the following options in its toolbar:

Change block type.
Drag the block.
Move the block up or down.
Align to the center, right, or left.
Change the code language (set to Plain Text by default.)
More options.

Block Settings

You will find additional block settings in the right sidebar when you click the block. If you do not see the sidebar, you may need to click the Settings icon in the top right corner to bring up the settings. This icon looks like a square with two uneven columns.

The settings icon in the Editor with a black background and the tooltip "Settings" below it. — Click the Settings icon to open the block settings

Code Language

Select the Code Language to choose what kind of code you want to display. It will be formatted with the correct syntax on the front end of your site.

Line Numbers

Choose to show or hide line numbers next to your code.

In the box for First Line Number, you can set the starting number. This will be 1 by default.

You can Highlight Lines by adding a comma-separated list of the line numbers you wish to highlight. You can also highlight a range of line numbers. For example, 1,5,10-20 will highlight line numbers 1, 5 plus 10 all the way to 20.

Make URLs Clickable

With this option toggled on, any URLs in your code will be clickable.

Edit Mode

Toggle on Enable edit mode on double click to allow your visitors to access a code editor. They can double-click on the code to make changes to it in their browser.

Their changes will not affect your site or what other visitors see. The changes will exist locally only and they will be lost after refreshing the browser.

Advanced

The advanced settings allow you to an HTML anchor and additional CSS classes for the current block.

Learn more about HTML anchors here. You can also learn more about adding additional CSS classes to blocks here.

Code Shortcode

If you use the Classic Editor, you can display formatted code using the code shortcode. If you have a plugin-enabled site, you will first need to install and activate this SyntaxHighlighter plugin to use this shortcode.

Once you have assembled a shortcode as explained below, place it into a Shortcode block and it will display the code on the front end.

The code shortcode is written as follows:

[code language="css"]

your code here

[/code]

The language (or lang) parameter controls how the code is syntax highlighted. The following languages are supported:

actionscript3
bash
clojure
coldfusion
cpp
csharp
css
delphi
diff
erlang
fsharp
groovy
html
java
javafx
javascript

latex (you can also render LaTeX)
matlab (keywords only)
objc
perl
php
powershell
python
r
ruby
scala
sql
text
vb
xml

If the language parameter is not set, it will default to “text” (no syntax highlighting).

The shortcodes also accept a variety of configuration parameters that you may use to customize the output. All are completely optional.

autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to select it to expand it. Good for large code posts. Defaults to false.
firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
highlight (comma-separated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19”.
htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
light (true/false) — If true, the gutter (line numbering) and margin (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
title (string) — Set a label for your code block. Can be useful when combined with the collapse parameter.