Syntax Highlighter For Displaying any types of Codes and Scripts In Blogger posts.As bloggers like us sometimes need to post different languages codes in our posts basically for programmers and some need to highlight some codes too in blogger posts like me to have on tutorials and display css codes.
Syntax highlighter is the plugin actually designed for wordpress blogs but we can still use it in blogger platform but with some features.
As you would have seen me using my own css for displaying codes.If you want it you can get it from here,how to display css codes in blogger posts.
This is how the syntax highlighter looks below you would have seen in blogger posts.
Now follow on these steps on how to install this syntax highlighter in blogger blog.
Step 1 :
Login to your Blogger account and navigate to Layout section . Then go to Edit Html Tab.
Step:2
Press Ctrl+F and search for </head>
Step 3:
Add The below codes above this </head>
<link href='http://www.sigmirror.com/files/16077_mfmek/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://www.sigmirror.com/files/16075_vovs4/shCore.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16067_qdw00/shBrushJava.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16068_sxqrw/shBrushJScript.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16074_y4x0p/shBrushXml.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16065_pax2t/shBrushCss.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16081_8ztl5/shBrushProperties.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16080_4fwwe/shBrushBash.js'/>
Please download the all above js files and upload to your own server and chnage he above urls with yours as mine may not work because my server bandwidth exceeds very fast.
Now search for </body>
And place the below codes above it.
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf='http://www.sigmirror.com/files/16078_i3xhu/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Now save your template.
If you find it difficult,add this widget direct from this page.
Now whenever you are posting codes in your blog posts place the codes between these tags in your posts.
<pre name="code" class="
java">
<----Your all codes Go here--->
</pre>
Change the class java to any other language if your using that in your codes like css,javascript,c-sharp or any else.And please only you add those languages that you have included in your html that you have added as i told you to add before /head tag.
If you want any other language codes to place and not having it please get it all from here.
I hope you would love this post.If you have any problem let me know i will help you.Labels: Blogger Widget, widgets
