Back to home 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, 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
Syntax Highlighter Code Block toolbar

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

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

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!