3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

The SyntaxHighlighter Evolved plugin allows you to post source code for others to view.  You use the SyntaxHighlighter Evolved plugin by enclosing your code in shortcode which preserves its formatting while providing syntax highlighting for certain languages.

Here is an example of code added using SyntaxHighlighter Evolved:

h1, h2, h3, h4, h5, h6 {
color: #1c1c1c;
font-family: "book antiqua",serif;
font-weight: 700;

To Use

Once you’ve activated SyntaxHighlighter Evolved plugin in Plugins > All you use it as follows:

1. Go to Posts > Add New (or Pages > 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

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