How to add Syntax Highlighter 3.0.83 in Blogger Template

How to add Syntax Highlighter 3.0.83 in Blogger Template

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.
 
Open Comment Box
justine says: 2/26/2014

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

www.n8fan.net

192.168.1.1 says: 9/20/2016

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.

Mohammad Fazle Rabbi says: 9/20/2016

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

Contact Form

Name

Email *

Message *