SyntaxHighlighter Evolved plugin

The SyntaxHighlighter Evolved plugin allows you to post source code for others to view.  

Here is an example of code added using SyntaxHighlighter Evolved:

</p>
<p>h1, h2, h3, h4, h5, h6 {<br>
color: #1c1c1c;<br>
font-family: "book antiqua",serif;<br>
font-weight: 700;<br>
}</p>
<p>

To Use

How you use the SyntaxHighlighter Evolved plugin once you’ve activated the plugin in Plugins > All depends on if you are using the block editor or the classic editor.

Block Editor

The following section explains how to add code using the block editor. If you are using the classic editor, refer to the classic editor section.

Add a SyntaxHighlighter Code block.

To add a SyntaxHighlighter Code block to a post or page you click on the + icon at the left of any empty block or at the top left of the editor then search for SyntaxHighlighter and click on the SyntaxHighlighter Code icon.

SyntaxHighlighter Code Block

Paste the code into the block.

Paste the code into the block

Next select the code language from the block settings.

Select Code language

If you don’t see the editor sidebar, click on the cog next to Publish/Update button. 

Click on cog

Other block settings options are:

  • First Line Number – Used to change what number the line numbering starts at. It defaults to 1.
  • Highlight lines – You can list the line numbers you want to be highlighted. For example “4,7,19”.
  • Make URLS clickable – All URLS posted in code are clickable. Toggle off if you don’t want URLS clickable.
  • Enable edit mode on double click

Classic Editor

The following section explains how to add code using the classic editor. If you are using the block editor, refer to the block editor section.

1. Go to Posts > Add New

Add new post

2.  Click on the Text tab on the post/page editor to switch to the Text Editing mode.

Click on Text

This is what the editor looks like when changed to text editing mode.

Text editing mode

Important tip:

Your post needs to be written in text editing mode if you’re adding code. Code can be mangled by the Visual editor if you changed to visual editing mode after adding the code. Switch back to Visual editing mode when you write your next post.

3.  Write your code wrapped with the Syntax Highlighter Evolved shortcode as shown below:

[code language=”css”]
your code here
[/code]

Replace “css” with the language you’re using.  The language supported are listed below.

Code added

Languages supported

The language paramater controls how the code is syntax highlighted.  If the language paramter is not set, it will default to “text” (no syntax highlighting).

The following languages are supported:

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • diff
  • erlang
  • fsharp
  • groovy
  • html
  • java
  • javafx
  • javascript
  • latex (not used as a shortcode)
  • matlab (keywords only)
  • objc
  • perl
  • php
  • powershell
  • python
  • r (not used as a shortcode)
  • ruby
  • scala
  • sql
  • text
  • vb
  • xml

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