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 (reference: 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.
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.