How to setup Syntax Highlighter on blogger

Introduction:
Syntax Highlighter is a self-contained code in javascript developed by alexgorbatchev. If you want to refer more you can visit it's official website http://alexgorbatchev.com/SyntaxHighlighter/.
It's a very basic need for most of the bloggers specially for technical persons who have to mention code in a highlight syntax.

Steps:
1) Go to Template in you blog and Edit HTML.
1) add the below css and javascript before </head>

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

3) <pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">

//ENTER YOUR TEXT HERE
</pre>

Now, when ever you want your syntax to highlight, put your code inside the above tag. Here, you can put any type of text and it will highlighted. But before using it, convert your text to html code.
For ex: Suppose your text is
<script></script>
so change <      &lt;
and           >      &gt;
and           &     &amp;

we are done!!

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.