Monday, July 25, 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

Step-1:

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. 

<!--SYNTAX HIGHLIGHTER BY MBT 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/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>
<!--SYNTAX HIGHLIGHTER BY MBT ENDS-->
  • Save the template.
Step-2:

Paste the following code before </body> tag.

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
  • 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:
Code:
<pre class="brush:php"> echo "hello"; </pre>
Output:
 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

0 comments: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

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