Enabling syntax highlighting in Blogger pages

Posted by bikethetam Sun, 16 Nov 2008 03:21:00 GMT

Blocks of source code don't always render very well in blogger if you just simply use the <blockquote> HTML tag, they just kind of melt in and are hardly distinguishable from the rest of the text. Thanks to Alex Gorbatchev, it's easy to make it better. Here are the steps:
  1. Go to http://code.google.com/p/syntaxhighlighter/ and download the latest version of the scripts. As of now the latest package is http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar
  2. Now you need to find a web server where to host those files. Once you've found it, you need to copy the files to the DocumentRoot:
    cd /tmp
unrar x SyntaxHighlighter_1.5.1.rar
cd $docroot
mkdir SyntaxHighlighter
cd SyntaxHighlighter
cp -r /tmp/dp.SyntaxHighlighter/S* .
  3. Go to the Layout tab on you Blogger console and choose "Edit HTML".
  4. Right after <Head> insert the following lines:
    <link href='http://yourwebsite.org/SyntaxHighlighter/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shCore.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushXml.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://yourwebsite.org/SyntaxHighlighter/Scripts/shBrushRuby.js'/>
  5. Right before </body> insert the following lines:
    <script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://yourwebsite.org/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
You can now write blog entries with syntax highlighting: You just have to surround the source code with 
<pre name="code" class="html:nogutter:nocontrols">
and 
</pre>
Please go to Alex's documentation to find the list of languages that are supported and which class to apply.

Leave a comment

Comments