How to use a syntax highlighter in blogger blog ?

Tweet

Since my site is mostly a programming tips site, so it is essential I use a syntax highlighter for my site to better highlight the keywords in a particular programming language and it also looks good.

First copy and paste the below code just before </head>.

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

Then copy and paste the below code in the body section of your site just before </body>. 

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Then go to http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css and copy the whole code.

Paste the code just above ]]></b:skin>. Save your template.

Now while writing a code you have to use <pre> tag in the HTML mode of your blog post. For example, if you are writing a "HELLO WORLD" program in C++ you have to use the <pre> tag like this.

<pre name="code" class="cpp">

#include<iostream>

main()

{

      cout<<"Hello World ! Welcome to programming in C++";

}

</pre>

would look like this :

#include<iostream.h>
main()
{
      cout<<"Hello World ! Welcome to programming in C++";
}

You can also use other classes for other programming languages :

C --> c , Java --> java , Javascript --> javascript  , HTML --> html , XML --> xml , CSS --> css , PHP --> php , C++ --> cpp etc.

Posted in: blogging tips