How to add Syntax Highlighter 3.0.83 in Blogger Template

How to add Syntax Highlighter 3.0.83 in Blogger Template

Comments: 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.
 

Speak Your Mind

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *