Blocks »SyntaxHighlighter Code Block

This block is currently not available for sites on our Business plan with plugins installed. If you would like to use a SyntaxHighlighter, you can still do so by following the instructions here.

Table of Contents

Syntax Highlighter Code Block
Sidebar Settings
Steps for Classic Editor

The Syntax Highlighter Code Block

With the Syntax Highlighter Code block, you can add formatted code for others to view.

For example, you can add this code inside the block in your editor:

And it will appear like this on your live site:

In order to add a SyntaxHighlighter Code block, click on the Block Inserter icon.

You can also type /code and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks can be found here.

↑ Table of Contents ↑

Most blocks have specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The SyntaxHighlighter Code block has a code language option. This lets you choose white kind of code you want to write so it will be formatted with the correct syntax on the live site.

↑ Table of Contents ↑


The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

These steps are for our classic editor or for sites on our Business plan with plugins installed. If you are using the block editor, you can use the SyntaxHighlighter Block described here.

By default on, for security reasons you cannot add custom code to your site, for example Javascript snippets, on sites that are not on our Business plan. However there is a way to post source code for viewing.

We have created a shortcode you can wrap around source code that preserves its formatting and even provides syntax highlighting for certain languages.

If your site is on our Business plan and has plugins or custom themes installed, you will first need to install and activate this SyntaxHighlighter plugin.

Here is an example:

#button {
	font-weight: bold;
	border: 2px solid #fff;

To accomplish the above, just wrap your code in these tags:

[code language="css"]

your code here


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

Code in between the source code tags will automatically be encoded for display, you don’t need to worry about HTML entities or anything.

↑ Table of Contents ↑

Configuration Parameters

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 click 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-seperated 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.

Here’s some examples of the above parameters in action:

This line is not highlighted.
This line is highlighted.
This line is highlighted.
This line is not highlighted.
 <strong>This</strong> is a short snippit of <code>code</code> with padlinenumbers set to 4. 

And here’s a larger code block to see it all in action. It is set to the PHP language with “htmlscript” enabled and line number 12 highlighted.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""&gt;
&lt;html xmlns="" xml:lang="en" lang="en"&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
	&lt;title&gt; Code Example&lt;/title&gt;
	&lt;h1&gt; Code Example&lt;/h1&gt;

	&lt;p&gt;&lt;?php echo 'Hello World!'; ?&gt;&lt;/p&gt;

	&lt;p&gt;This line is highlighted.&lt;/p&gt;

	&lt;p&gt;This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.&lt;/p&gt;

	&lt;div class="foobar"&gt;
		This	is	an
		example	of	smart

	&lt;p&gt;&lt;a href=""&gt;;/a&gt;&lt;/p&gt;

↑ Table of Contents ↑


Alex Gorbatchev’s SyntaxHighlighter project was used in the implementation of this feature. If you are a user and would like to use this feature on your self-hosted blog, it is available as a plugin.

Still confused?

Contact support.

Not quite what you're looking for?

Get Help