Syntax Highlighting in WordPress

One desired feature of the Mr.Fish Studios site is the ability to provide sample code and tutorials. In order to do this in a way that is compelling and valuable, we need to incorporate a WordPress Plugin that will highlight and format code snippets inline with text. To fill this need, MFS has selected SyntaxHighlighter Evolved by Alex Mills (aka Viper007Bond), which in turn is based on the work of Alex Gorbatchev’s javascript based SyntaxHighlighter. This post will demonstrate its use and provide a useful test of the functionality itself. Prior to this post, I had not used SyntaxHighlighter Evolved before … this demonstrates a basic principle here at MFS: “To share what we learn as we develop solutions to problems in projects we are working”. We needed syntax highlighting for MFS … and here is the solution we discovered/selected.

Let’s begin with the simplest example … the venerable ‘Hello, World!” written in C. Here is the code snippet.

void main
{
	printf("Hello, WordPress!");
}

Obviously this is as simple as it gets, but it demonstrates a core capability we will need here at MFS — syntax highlighting of sample code inline with text.

So, how was this accomplished?

Step 1 – Install and Activate the Plugin
The first step is to install the SyntaxHighlighter Evolved plugin into WordPress. I assume at this point that you have an active and functional WordPress site; if not, visit WordPress.org for instructions to get started.

  • Step 1a – Select Plugins:Add New from the wp-admin navigation bar (left-side of the window).
  • Step 1b – Search for ‘SyntaxHighlighter Evolved‘ as shown in Figure 1.
    WordPress Plugin Search Form

    Figure 1: Searching for the SyntaxHighlighter Evolved Plugin in wp-admin.
  • Step 1c – Click on Install Now once you find the Plugin in the list. As you can see in Figure 2, MFS has already installed the SyntaxHighlighter Evolved plugin.
    WordPress Plugin search results

    Figure 2: Search results … the SyntaxHighlighter Evolved Plugin is already installed here.
  • Step 1d – Activate the SyntaxHighlighter Evolved Plugin on the Installed Plugins page. A successful installation and activation will look something like Figure 3.
    Wordpress installed plugins

    Figure 3: The SyntaxHighlighter Evolved Plugin has been successfully installed and activated.
  • Now we are ready to add a code snippet with syntax highlighting to your WordPress post or page using the SyntaxHighlighter Evolved Plugin.

    Step 2 – Add Your Source Code
    Surround the code you want to add to your post with the shortcode sourcecode enclosed in square brackets as shown in Figure 4. A parameter specifies the language and the associated syntax highlighting convention used.

    Syntax Highlighting Code

    Figure 4: Adding the sourcecode shortcode to provide syntax highlighting in your posts.

    The visually pleasing and information enhancing result is repeated here.

    void main
    {
    	printf("Hello, WordPress!");
    }
    

    Very nice!!

    You can also add shortcode tags specific to the language of interest, e.g. [html], [java] or [python]. The settings page for the SyntaxHighlighter Evolved Plugin provides a listing of shortcode parameters and some example shortcodes at the bottom of the page to get you started.

    The SyntaxHighlighter Evolved supports a fairly complete set of languages. Inspection of the /wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts directory reveals more than 20 supported languages as of version 3.1.3.

    • AS3
    • AppleScript
    • Bash
    • C#
    • ColdFusion
    • C++
    • Css
    • Delphi
    • Erlang
    • Groovy
    • JScript
    • Java
    • JavaFX
    • Perl
    • Php
    • Plain Text
    • PowerShell
    • Python
    • Ruby
    • Sass
    • Scala
    • Sql
    • VB
    • XML

    In addition, Abel Braaksma has written an excellent article entitled ‘All Syntax Highlighter 2.0 brushes collected, described and downloadable‘ that provides more information. And, of course, there is the official site for the SyntaxHighlighter Evolved.

    SyntaxHighlighter Evolved facilitates easy posting of syntax-highlighted code to your site without having to modify the code at all. Mr.Fish Studios has selected this WordPress Plugin as a foundational part of the MFS Site.

    About Rolf Gobot

    I am an entrepreneur, physicist, and software engineer interested in all things science, technology, engineering, and mathematics (STEM). My current projects are focused on robotics and teaching children basic STEM skills such as programming.
    Bookmark the permalink.

    One Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>