Code Syntax Highlighting in WordPress

Have you visited a webpage where lines of programming code are written in different colors depending on their function in the code? That is called syntax highlighting. In this tutorial, we will implement syntax highlighting in WordPress using a plugin that is built on SyntaxHighlighter, a JavaScript package developed by Alex Gorbatchev.

1. Install and activate the SyntaxHighlighter Evolved plugin.

2. Go to Settings > SyntaxHighlighter in the dashboard of your WordPress site.

3. Set Highlighter Version to Version 3.x.

4. In Color Theme, we will settle with Default in this tutorial.

5. Tick the checkbox for Load All Brushes.

6. In Miscellaneous, tick the checkboxes for the following (you can experiment with the other options):

  • Display line numbers
  • Use smart tabs allowing tabs being used for alignment
  • Wrap long lines (v2.x only, disabling this will make a scrollbar show instead)

7. Make sure Starting Line Number is set to 1.

8. See to it that Line Number Padding is set to Off.

9. In Tab Size, the default value of 4 is fine.

10. Leave Title blank.

11. Click on the Save Changes button.

12. Go to your post and wrap your code in <pre class=””> and </pre> tags. The class name format consists of the word brush, followed by a colon, and then followed by the brush alias. For example, for CSS <pre class=”brush: css”>, for PHP <pre class=”brush: php”>, for JavaScript <pre class=”brush: js”>.

Refer to the table below for the other brush aliases (source: SyntaxHighlighter brushes table):

Programming Language Brush Alias
ActionScript3 as3, actionscript3
Bash/shell bash, shell
ColdFusion cf, coldfusion
C# c-sharp, csharp
C++ cpp, c
CSS css
Delphi delphi, pas, pascal
Diff diff, patch
Erlang erl, erlang
Groovy groovy
JavaScript js, jscript, javascript
Java java
JavaFX jfx, javafx
Perl perl, pl
PHP php
Plain Text plain, text
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet
XML xml, xhtml, xslt, html, xhtml


Have a look at the image below. SyntaxHighlighter displays something like this for the PHP programming language.

SyntaxHighlighter Evolved

The number list in the left column and the green line can be removed by setting the value for gutter to false in the class. For example, for CSS <pre class=”brush: css; gutter: false”>, for PHP <pre class=”brush: php; gutter: false”>, for JavaScript <pre class=”brush: js; gutter: false”>. Take note of the semi-colon that separates the expressions for brush and gutter.

Visit the SyntaxHighlighter Configuration page to find out what more you can do with the web tool. Also check out the homepage for the SyntaxHighlighter Evolved plugin.