Syntax Highlighting with SyntaxHighlighterSyntax Highlighting with SyntaxHighlighter

Posted January 22nd, 2010 in Javascript

Alex Gorbatchev's SyntaxHighlighter is a Javascript plug-in to easily highlight programming code syntax in web pages. It supports a wide variety of programming and markup languages including PHP, Javascript, HTML, CSS, SQL and more.

SyntaxHighlighter Wiki

The SyntaxHighlighter Wiki contains all you need to get started to download the required files and how to add syntax highlighting to your pages. It's as simple as adding some Javascript and CSS files to your HTML file, adding a class to your code <pre> tags and then invoking "SyntaxHighlighter.all()" in Javascript.

Example Usage

After extracting the downloaded file to your website, add the following to the <head> section of your HTML template, adjusting the paths as necessary, and adding additional brush files. The example below includes the Javascript brush file only.

<script type="text/javascript" src="syntaxhighlighter/src/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

Now in your HTML somewhere add a <pre> tag with the class set as the appropriate brush:

<pre class="brush: js">
    function foo() {
    }
</pre>

And finally either at the end of your page just before the closing </body> tag, or in a jQuery document.ready section or similar, add this:

<script type="text/javascript">
    SyntaxHighlighter.all()
</script>

These instructions are all borrowed from the SyntaxHighlighter Usage page.

<pre> vs <script> tags

Version 2.1 of the SyntaxHighligher supports a new <script type="syntaxhighlighter" class="brush: js"> style which can be used instead of <pre> tags but I wouldn't recommend the use of this.

If for some reason there is no Javascript (e.g. in a feed reader, or the browser has it switched off etc) then nothing will render, whereas the content of a <pre> tag will.

Also, it's important for some people to have their pages validate and the <script> syntax will fail validation for an XHTML document which does not allow a "class" attribute in a script tag.

The HTML brush

The complete list of bundled brushes can be found on the Brushes page of the Wiki. Just in case you miss seeing it at first, the brush for HTML is the "xml" one.

Usage of the SyntaxHighlighter on my blog

I have started to use the SyntaxHighlighter on my blog from this post. I may go back and add in syntax highlighting to older posts as well if I need to edit them in the future.

Rather than have to include a large number of external CSS and JS files to use the Syntax Highlighter I merge them together into a single file and then use the YUI Compressor to make a minified file. These are then compressed using Apache's mod_deflate to ensure maximum transfer speed.

Related posts:

Share or Bookmark

Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.

Subscribe or Follow

Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.

Comments

blog comments powered by Disqus