Syntax Highlighter Installation Guide in Blogger Blog – With no ‘/br’ Error

Syntax highlighting is a feature of some text editors that displays text, especially source code in different colors and fonts. SyntaxHighlighter helps developer/coder to post code snippets online in different color formats. It is pure Javascript based. Click on the thumbnail to enlarge.

In this post i will explain, how to install ‘SYNTAX HIGHLIGHTER’ in blogger blog.

Demo:

/* reverses the entire array */<br />void reverse ( int *arr )<br />{<br />int i ;<br />for ( i = 0 ; i &lt; MAX / 2 ; i++ )<br />{<br />int temp = arr[i] ;<br />arr[i] = arr[MAX - 1 - i] ;<br />arr[MAX - 1 - i] = temp ;<br />}<br />}<br /><br />/* searches array for a given element num */<br />void search ( int *arr, int num )<br />{<br />/* Traverse the array */<br />int i ;<br />for ( i = 0 ; i &lt; MAX ; i++ )<br />{<br />if ( arr[i] == num )<br />{<br />printf ( "\n\nThe element %d is present at %dth position.", num, <br />i + 1 ) ;<br />return ;<br />}<br />}

+/- Click Here to Read Synatax Highlighter Features

+/- Here’s the List of Supported Languages in Syntax Highlighter

Check out more supporting languages here.

Implementation Of Syntax Highlighter in Blogger Blog : 
1. Login to Blogger Dashboard 
2. Go to Layout >> Edit HTML 
3. Save Your Template first (Donot expand widget template) 
4. Now copy and Paste the following code right above </head> or </body> tag. (prefer ‘/body’ tag for optimal result)&nbsp

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/><link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true;SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';SyntaxHighlighter.all();</script>

Note : current is the latest syntax highlighter version. You can find latest version here.

8. If you want you can upload Javascript, css, flash file(clipboard.swf) files ( in red) in your own server or in google page creator and link to it. If you don’t have google page creator account, just visit alexgorbatchev. alexgorbatchev hosting and sharing all ‘Syntax Highlighter’ source code files online. 


Usage: 
 
<pre name=”code” class=”Language Aliases“>
… some code here … 
</pre>  
or  
<textarea name=”code” class=”Language Aliases” cols=”60″ rows=”10″> 
… some code here … 
</textarea>  

Note : If you are using first one (code between <pre> and </pre>’), you need to change all triangular bracket in your sources code < with an HTML equivalent of &lt; . Here is the online tool to escape your html tags ie. < and > .

Language Aliases: It Means which language you are going to highlight. Refer List of Supported Languages Aliases. Example:: c-sharp, js, javascript, html .. etc  

Related Documentation: Visit here or latest version here.