How to Add a Syntax Highlighter to a Blogger Blog

Most of the blogger use the blockquotes means a <blockquote> tag to highlight or show specially in quotes form on a web page. Tricks bloggers use this blockquote tags to add the codes of tricks or widgets and therefore needs a neat and clean blockquote for their blog. Most bloggers use the standard blockquoteto share tutorials based on scripts and codes with their visitors but Alex Gorbatchev has created an amazing fully functional Highlighter that neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source. So lets begin and try to understand that how can we apply a syntax highlighter on a blogger blog.

Must Read- 20 awesome CSS blockquote styles

Add a Syntax Highlighter to a Blog-

Follow these steps below to apply a syntax highlighter on your blog-

1. Go to Blogger>Dashboard>Template.

2. In template click on Edit HTML option and proceed.

3. Search for   ]]></b:skin> and paste the following code just below it.

<!—HT4U SYNTAX HIGHLIGHTER STARTS-->
<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>
<!—HT4U SYNTAX HIGHLIGHTER  ENDS-->

4. Save the template. You are done , by applying this script the syntax highlighter is enabled on your blog.

How to use the Syntax Highlighter?

Whenever you want to put a code on quotations or block quoted then add this code below to enable the syntax highlighter on your blog. Or simply enclose the code between these lines.

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

I have combined all brushes into one making it easier for newbie to implement the tutorial.

Note: Do not add the code directly because you will get error in Blogger Editor, instead first parse the code using the Parser Tool provided by us.

Replace ADD THE PARSED OR BLOCKQUOTE CODE HERE with the parsed/encoded code and publish your post to the see the magic.

Final Words-

This syntax code is not used by all famous blogger but if you think that it is a great think then you can apply it on your blog but remember that this is a waste of your time , I am not saying that you can’t add this syntax highlighter to your blog but you are just adding these scripts may cause any slow loading of pages, So as a Author , my advice is that if you really want this syntax highlighter or it is necessary to your blog then you keep it. Otherwise it is waste of your time.

I have made this code simpler as it is possible so it is requested to readers that they please leave a reply to us so we think that they are appreciating our hard work on creating/adding this trick.

Need Help-

If you don’t want to get into a serious problem in editing a template then tell it to us (submit a request to us by commenting below) we will try to solve it for you absolutely free. This is a limited offer by hackintricks4u.blogspot.com to get their free services

Share This

Related Post