Tuesday, July 26, 2016

Syntax Highlighter Magic! How to Install Syntax Highlighter in Blogger?

Hey! Many a times you want share codes in your blog, but you don't find any way to do that. Most of the people just quote the codes. I also use Blockquote to display codes. But it is not a good way to display codes in your blog. Today, I will make you familiar with Syntax Highlighter and how to implement this to highlight codes in your Blogger blog. 

Syntax Highlighter is free tool to display codes in Websites. And it is one of the most used code highlighter. Almost every web developer, blogger, webmaster uses this tool to display codes. It is developed by Alex Gorbatchev. You should thank to him for developing such a useful tool. It supports highlighting of large number of programming languages like as3, bash, csharp, coldfusion, cpp, css, jscript, java, javafx, perl, php, plain, powershell, scala, sql, vb, xml etc. Now we can know how to add this to Blogger blog.
  • Add Syntax Highlighter To Blogger


First of all we will install the syntaxHighlighter in the blogger.  So, to Install just go to the blogger Dashboard's Template tab and first take the backup of the template to be on safe side. Here is the post that explains how to take backup. Now edit the template by hitting the edit HTML button and search in the code, press Ctrl+F, a Search box will appear, type  <head> in the search box and press enter, it will take you to the head tag of html code. 

Now just paste the given code below the <head> tag in the blogger. 

<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/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;;
  • Save the template.

Paste the following code before </body> tag.

<script language='javascript'>
  • Save the template.
  •   How To Use Syntax Highlighter Brushes?

You just installed Syntax Highlighter in your blog. To use syntax highlighter while writing a blog post just switch to HTML mode and paste your code between <pre></pre> tag as shown below.

  <pre class="brush: javascript"> Your Code Goes here...... </pre> 

Here define the brush class according to your the code you are going to embed, for this example I have selected javascript. Check out the available brush class list for syntaxHighlighter-
  •   Syntax Highlighter Brushes Preview?

choose a class name (original or alias name) and go ahead. Example:
<pre class="brush:php"> echo "hello"; </pre>
 echo "hello"; 
  • Conclusion

That's all about adding/integrating syntax highlighter in Blogger. I wish you are able to add Synatx Highlighter in your Blog. If you need any kind of help than feel free to ask. Hope you like it!

Previous Post
Next Post

Show Comments: OR

0 comments: Post Yours! Read Comment Policy ▼
Attention Please
No comments that are not related to the post can be made. Do not share your blog link without any reason. Always try to give positive comments. We evaluate all opinions equally and try to answer them in due course.

Post a Comment

Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE