Back to Support Content and Media Blocks SyntaxHighlighter Code Block

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.

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 information, visit our detailed instructions on adding blocks.

Block Toolbar

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

The Syntax Highlighter Code Block toolbar
SyntaxHighlighter Code Block toolbar

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

Block Settings

When you select a block, you will find additional block settings in the right sidebar. 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 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. See the full list of supported languages.

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.


For more information, visit our detailed instructions on Advanced Settings.

Supported Languages

The following languages are currently supported in the SyntaxHighlighter Code block, using either the Block Toolbar or the Block Settings area:

  • ActionScript
  • Arduino
  • BASH / Shell
  • C#
  • C / C++
  • Clojure
  • ColdFusion
  • CSS
  • Delphi / Pascal
  • diff / patch
  • Erlang
  • F#
  • Go
  • Groovy
  • Haskell
  • Java
  • JavaFX
  • JavaScript
  • LaTeX (you can also render LaTeX)
  • Objective-C
  • Perl
  • PHP
  • Plain Text
  • PowerShell
  • Python
  • R
  • Ruby / Ruby on Rails
  • Scala
  • SQL
  • Swift
  • Visual Basic
  • YAML

Code Shortcode

As an alternative to the block, you can use a shortcode option.

You can use the Code shortcode to display code in the Classic Editor, or by placing it in a Shortcode block in the block editor. If you have a plugin-enabled site, you must install and activate this SyntaxHighlighter plugin to use this shortcode.

The code shortcode is written as follows:

[code language="css"]

your code here


The language (or lang) parameter controls how the code is syntax highlighted. You can use the code shortcode to format languages that include, but are not limited to:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • diff
  • erlang
  • fsharp
  • groovy
  • html
  • java
  • javafx
  • javascript
  • 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.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!