How to add Syntax Highlighter 3.0.83 in Blogger Template

How to add Syntax Highlighter 3.0.83 in Blogger Template

3
data:blog.title
Blogger Hack
Generally we see that different blogger are using syntax highlighter for highlighting the code block. That is carry an extra attention to the visitors. So for highlighting the code block in your blog I will share with you ready made code thus you can install syntax highlighter easily.  The latest version of syntax highlighter is 3.0.83. So now we will learn how to apply it in our blogger template. I have hosted the file for CSS, Java Script, Ruby, Xml, xHtml, xslt, PHP, Java, Plain Text. Please go through the following steps-


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML-> Proceed  
Step 3 Now Find this code </head> by pressing Ctrl+F
Step 4 Now Paste the below code Before/above </head>
 

<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/shBrushCss.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/shBrushJava.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/shBrushPlain.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/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
            SyntaxHighlighter.config.bloggerMode = true;
            SyntaxHighlighter.all();
</script>



Step 5 Now save your templates.


www.bloggerspice.com


How To Use?


First you have to make the code HTML escaped that means all < must be replaced with &lt; This will ensure correct rendering. You can also use the Code converter from Here.  For using Syntax Highlighter generally you have to write code between  <pre> and </pre> tags, as well as you have to define a class <pre class=''></pre> and give a brush name as <pre class='brush:js;'></pre>. 
If you want to use Java Script then you have to add js as a brush name.



<pre class='brush:[brushname];'>

<!--Put Your Code Here (must be HTML escaped/Encoded Code)-->

</pre>


Or


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



  And remember put you code in HTML mode instead of Compose mode.
 
How to add Syntax Highlighter 3.0.83 in Blogger Template
4 Stars stars - "How to add Syntax Highlighter 3.0.83 in Blogger Template" Generally we see that different blogger are using syntax highlighter for highlighting the cod...

Post a Comment

i have joined your feed and look forward to seeking more of your post.

www.n8fan.net

nice! thank you so much! Thank you for sharing. Your blog posts are more interesting and impressive. I think there are many people like and visit it regularly, including me.

Welcome Bro... Impressive feedback. Love it. :lo

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *