Add Code Samples To Your Blog Using SyntaxHighlighter

As I was setting up my website in preparation for blogging about .NET development (and other random) topics, I quickly realized that I didn’t know how to create those nifty, nicely-formatted, syntax-colored code samples.  A little Googling and a few minutes later, I came across SyntaxHighlighter by Alex Gorbatchev.

Let’s try a code sample here:

namespace MyApplication
{
    public class MyClass
    {
        public string MyMethod()
        {
            return "Hello, World!";
        }
    }
}

Bam! Not only do you get syntax coloring for whatever language you choose (it has built-in support for 17 languages and is extensible, allowing anyone to add support for new languages), it also displays those handy line numbers and includes a toolbar that allows “view source”, copy to clipboard, and print. Best of all, SyntaxHighlighter is free!

The magic of SyntaxHighlighter is accomplished using Javascript and Flash. Of course, people sometimes disable these capabilities in their browsers. No worries, your code sample will still be displayed, albeit without the syntax coloring and other features. You can test this out on this page by disabling Javascript (if it isn’t already) and seeing what happens.

To utilize SyntaxHighlighter on your own site:

  1. Download the latest version of SyntaxHighlighter.
  2. Extract the scripts and styles folders to your site.
  3. Include the following scripts (or just those scripts for the languages you want to support) and style sheets in your page.
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
    
  4. Include the following script just before the closing body tag
    <script type="text/javascript">
        dp.SyntaxHighlighter.ClipboardSwf = 'scripts/clipboard.swf';
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>
    
  5. Now you’re ready for action. To use SyntaxHighligher, you simply wrap your code sample with a <pre> tag that contains a CSS class assignment for the appropriate language, as done in the code sample at the start of this post.
    <pre class="brush: csharp;">
    namespace MyApplication
    {
        public class MyClass
        {
            public string MyMethod()
            {
                 return &quot;Hello, World!&quot;;
            }
        }
    }
    </pre>
    
  6. Apply party hat to head.

Big thanks to Alex Gorbatchev for his great work on this. If you like SyntaxHighlighter, you can donate to Alex on his website to help support his efforts. Also, thanks to Scott Hanselman for his related blog post Best Code Syntax Highlighter for Snippets in your Blog.

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s