find a location for property in a new city

Saturday 3 April 2010

Colouring code with Syntax Highlighter

I need to colour my code samples to make it more readable and more like your IDE. I have been putting spans around each key word to colour manually and being a developer I know there must be an easier way! So I did some research and found that it is all about SyntaxHighlighter! Here is how to use Syntax Highlighter to colour your code.

  1. So first up you need to put this in the page head just before the </head> tag:
    <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/shBrushCSharp.js' type='text/javascript'></script> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.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>
  2. Then you simply surround any code in these tags:
    <pre class="brush: csharp"></pre>
I have used C# for my example but there are many more languages that can be specified. I only import the C# and SQL but you can get more if needed.

Follow britishdev on Twitter

No comments:

Post a Comment