How To Add Syntax Highlighter To Blogger

Posted by: Shahbaz Malik on 13 November 2011 Under:
Most of the Bloggers use their own custom blockquote to highlight their code or scripts but other one share their code with reader by Standard Syntax highlighter created by Alex Gorbatchev. Syntax highlighter is a powerful JavaScript code to display and highlight your code and scrips. It is an amazing full functionally highlighter that neatly display your HTML, CSS, JavaScript , php etc.The code are displayed line by line with numbers. It also provide, copy this code, print this code function to the readers.


How to Add Syntax Highlighter in Blogger :-
 
       1.Login to your Blogger Dashboard.
       2.Go to Design /  Edit HTML.
       3.Download your full tempate.
       4.Find ]]></b:skin> in your template.
       5.And just below it paste the following code.

<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/2.1.382/styles/shThemeDefault.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/current/scripts/shYouBrushJava.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 = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>


Whenever you wish to share a code  with your readers simply enclose the code between the coding

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
                 ADD THE PARSED CODE HERE
</pre>
If you enjoyed this article then kindly take 5 seconds to share it!!

0 comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...