How to Implement Syntax Highlighter on Blogger
By jonkarna
Syntax highlighting is a strategy to improve the readability of code. When my blog was hosted on blogger, I posted this article on how to implement Syntax Highlighter on a blogger blog.
Download SyntaxHighlighter
Create/Use a google pages account to upload the following files
- SyntaxHighlighter.css
- clipboard.swf
- shCore.js
- shBrushCss.js
- shBrushJava.js
- shBrushJScript.js
- shBrushSql.js
- shBrushXml.js
Inside of the <head>tag, link to those files
<link type="text/css" rel="stylesheet" href="http://you.googlepages.com/SyntaxHighlighter.css" /> <script type="text/javascript" src="http://you.googlepages.com/shCore.js"></script> <script type="text/javascript" src="http://you.googlepages.com/shBrushCss.js"></script> <script type="text/javascript" src="http://you.googlepages.com/shBrushJava.js"></script> <script type="text/javascript" src="http://you.googlepages.com/shBrushJScript.js"></script> <script type="text/javascript" src="http://you.googlepages.com/shBrushSql.js"></script> <script type="text/javascript" src="http://you.googlepages.com/shBrushXml.js"></script>
And this JavaScript
dp.SyntaxHighlighter.ClipboardSwf = "http://you.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll("code");Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use.
<pre><textarea name="code" class="xhtml" cols="60" rows="1"> ... some code here ... </textarea></pre> <pre name="code" class="xhtml"> ... some code here ... </pre> <pre class="xhtml" title="code"> ... some code here ... </pre>
If done my way using the title attribute instead of name, also add this bit of jquery in the tag (or any other sort of javascript that will add the name attrib
$("pre[title=code]").attr("name", "code");On your blogger blog, turn off the "Convert Line Breaks" option in Admin > Formatting. If this is not turned off, all of your code will show up on one line. I prefer to have this turned off by default anyways.
Comments
No comments yet.
