Blocks

Blocks » 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.

Table of Contents

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.

↑ Table of Contents ↑

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:

  • 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.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ 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 tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.

↑ Table of Contents ↑

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.

  • 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.
Still confused?

Contact support.

Not quite what you're looking for?

Get Help