Setting up SyntaxHighlighter using the hosted scripts

I’ve tried several source code syntax highlighter systems over the years. Most inserted a bunch of ugly markup and CSS into the page. It kind of worked, but made the “love the web” burst out in tears at inappropriate times. I was really happy to see when Scott Hanselman posted on SyntaxHighlighter, since it seemed to allow for clean markup and unobtrusive Javascript.

Here’s the general idea: you set specific classes on an HTML <PRE> tag that contins your code, and the SyntaxHighlighter Javascript and CSS turn on all the magic. So you get pretty code, but it’s still text that can be cut and pasted (as all great code aspires to be).

Here’s what it ends up looking like:

[TestMethod]
public void AttributesProperty() {
    // Setup
    DummyMvcControl c = new DummyMvcControl();

    // Execute
    IDictionary<string, string> attrs = c.Attributes;

    // Verify
    Assert.IsNotNull(attrs);
    Assert.AreEqual<int>(0, attrs.Count);
}

Even better, folks have written utilities to make it easy to insert your code in the correct format for SyntaxHighlighter. My favorite is the PreCode Snippet Manager, which can integrate directly with Windows Live Writer.

PreCode Code Snippet Manager for SyntaxHighlighter

Scott summarizes how SyntaxHighlighter works and how you can add the scripts to your site, so I won’t rehash it here.

But what if you can’t (or don’t want to) host the SyntaxHighligher files?

So SyntaxHighlighter is great, but what if your blog hosting setup doesn’t let you upload Javascript and / or CSS? No problem, the SyntaxHighlighter site is now offering a hosted version, so all you need to do is link to their hosted files.

For example, here’s how I set that up on my weblogs.asp.net blog (running Community Server 2007). The first trick is knowing where to put custom HTML: the Title, Description, and News area of the management dashboard:

SyntaxHighlighter - Setup on weblogs.asp.net

Then you drop in the script references at the end of the News area:

ScriptHighlighter - Inserting Hosted Scripts

You can use a specific version of the SyntaxHighlighter scripts, or you can use whatever’s the most current. That’ll make sure you get the latest updates, and I think the risk of a breaking change is pretty low. Refer to the documentation on the SyntaxHighliter site for more info, but here’s an example courtesy of Carter Cole:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

7 Comments

  • I'd really like to see someone come up with a version of this that allows for simple copy-and-paste of code. Especially for longer samples, if I want to try something out, having to manually remove extra lines, line numbers, etc is a PITA.

  • Eric - Not sure what you mean. When you mouse-over the upper-right corner of the sourcecode box, you get both copy and view source buttons, both of which give you clean code with no line numbers.

  • Neat blog! I have used SyntaxHighlighter on my blog, but I noticed that on fixed-width themes or other narrower themes, the code sometimes overruns the that it is contained in.

    I recently changed the theme on my blog to a narrower width and SyntaxHighlighter did NOT like it at all. I now have to use two different plugins for this...

    I'm using SyntaxHighlighter (strictly for HTML code highlighting) and WP-SynHighlight for everything else. Both are great plugins, I just wish SH played better with narrower designers.

    -Steve

  • Doh -- Jon, I didn't even notice the overlay. That's a handy feature!

  • The PreCode Snippet Manager is also a pretty good tool to use when you're inserting code examples into sites that don't use the Javascript SyntaxHighligther scrips. Great tool to mention!

  • You don't get the highlighting in RSS aggregators though, as the JS isn't there. But it does scale nicely down to readable PRE.

  • Wow, it's very nice tutorial! I've been searching for this tutorial since 2 days.. Very useful. Thanks for sharing here.. :)

Comments have been disabled for this content.