Syntax Highlighter for Blogger

syntax highlighter is the word which most tutorial sharing blogs and websites use as we use the conventional old blockquote method to post programming code.Alex Gorbatchev  have created a code which is fully optimized to show codes in numbered list and different styles.Here we are sharing the latest version of the syntax highlighter.

Using this syntax highlighter blogger is capable of  displaying codes in different format for different codes.As we can show all CSS,HTML,PHP,JavaScript,Python,Perl,core,cpp,sql,Ruby.etc.For displaying different code you must want to different Brushes that will be given below.

Note:the above is older version 2.1.382's  image.We recommend to use older version.we also give the latest version below. If you need You won't get same as this but latest 3.0.83 version has more control as double click on coded part to select the entire codes.

Syntax Highlighter Code for Blogger - 2.1.382 older

1.Login to Blogger 

2.Edit Template

3.Then search for the below code

]]></b:skin>

Then copy and paste the below just below or after the above code and save the template.

<!-- Blog4al Syntax Highlighter code start -->
<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>
<!-- Blog4al Syntax Highlighter code End -->

Then save the template.

Syntax Highlighter Latest version 3.0.83 for Blogger

You can use this version but you won't get same as this but latest 3.0.83 version has more control as double click on coded part to select the entire codes.

<!-- Blog4al Syntax Highlighter code start --> <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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Blog4al Syntax Highlighter code End -->

SEO Optimization Tips:-

In above code we have given all the brush codes for all programming languages like xml,php,html,css.etc. But you may not use all the programming language.If you don't use any languages in your post then just remove unwanted codes.If don't know how to do it comment below ,we will help you.

Adding Brush to Codes

By adding above you have done most of part then you must want to add brushes inside posts.

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
ADD THE PARSED CODE HERE
</pre>

Make sure include only necessary brushes to that code.You must want to add parsed code otherwise you will get error.You can use our to parse the code with escape codes  tool.If you use more than two different code then you must want include two brushes.

Options:-
The above code has default theme of syntax highlighter we are in next post to provide different themes and also different blockquote methods.

Having any trouble comment below?