Thursday, February 26, 2009

Add syntax highlighter in Blogger

After adding syntax highlighter in my blog template, my previous blog looks much better now:)

Actually it's quite easy, just add following code snippet in the head section of blog template, right after <head> tag; then put <pre name='code' class='c++'>...</pre>around the code when you write blogs, everything will be ok:


<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>
<script language='javascript'>
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>
<style type='text/css'>
.console {
background-color: black;
color: #ffffff;
font-family: courier;
}
</style>

Note:
1) I directly link to the js scripts in google code here, you can upload them to your web spaces and replace them;
2) Other languages' syntax support is also available from there;
3) Replace < > with &lt; and &gt; when you composite the blog.

Reference:
[1] SyntaxHighlighter Usage
[2] Blogger + SyntaxHighlighter

No comments: