The following procedures help you to setup the SyntaxHighlighter in your Blogger.
1. Download the SyntaxHighlighter.
2. Upload the SyntaxHighlighter's files to any host or website which ca be linked from your blog. (see Note 1)
3. Login to your blogger account, go to "Dashboard" - "Layout" - "Edit HTML".
4. Edit the contents of your template by adding the following code at bottom of the page, just before the </body> tag.
<link href='http://YOUR_HOST_URL/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://YOUR_HOST_URL/shCore.js'/>
<script language='javascript' src='http://YOUR_HOST_URL/shBrushJava.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5. Save the template.
6. Now you can start using it in your posts. Go to "Posting", create or edit a post in "Edit Html" mode. Place your code snippets between <pre> and </pre> tags as shown below (See Note 2).
<pre name="code" class="js">
--your code here---
</pre>
Notes:
1. It is not really needed to upload the files to a server as the SyntaxHighlighter is already hosted by Google Code. I got it done for my blog using the following code:
<link href='http://1561834568390153680-a-1802744773732722657-s-sites.googlegroups.com/site/
infotechden/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushBash.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r92/trunk/Scripts/shBrushXml.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
As you can see, I used all the files hosted by Google Code except for SyntaxHighlighter.css file. The "hosted" CSS file is different from the "downloaded" CSS file and will produce a different output, so it is advisable to use the "downloaded" CSS file.
2. When placing a code snippet, the opening triangular bracket < must be replaced with an HTML equivalent of < in all cases. Failure to do won't break the page, but might break the source code displayed.
Related blog posts:
No comments:
Post a Comment