Skip to main content

How To Add Syntax Highlighter In Blogger To Display Codes

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.

How To Add Syntax Highlighter In Blogger To Display Codes

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

Blogger is one of the best blogging platform that provides many features for free. It is very simple to use. In this post I will show you how to add syntax highlighter in Blogger. It is very simple to add this in Blogger. You will only need to paste few codes in your Blogger template. There are two ways to add to add Syntax Highlighter. You can host its' java scripts files yourself. If you don't have file host than you can use free hosted version of Syntax Highlighter.
  • If you want to host the scripts yourself than you can download the scripts from here.
  • You will need to extract the files and than upload it to your server.
If you like to use free hosted version of Syntax Highlighter for Blogger than follow the steps given below. Don't forget to backup your template before any customization. Now follow the step given below:
  • Go to Blogger Home.
  • Now you have to go to Dashboard. In the dashboard Click on template.
  • In the Template page click on Edit HTML which is below the live preview of your Blogger blog.
  • Paste the code given below just before </head> tag. You can search for </head> tag by clicking anywhere in the HTML page and Press CTRL+F to open search box. In the search box type </head> and hit enter.
  • After finding </head> tag paste the code given below just above/before the closing head tag(</head>).
<!-- SyntaxHighlighter starts -->
<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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.strings.viewSource = "Copy code from here";
SyntaxHighlighter.defaults['smart-tabs'] = true;
SyntaxHighlighter.defaults['toolbar'] = true;
</script>
<!-- SyntaxHighlighter ends -->
If you don't want to show these codes on home page than you can use conditional tags to do that. If you don't know how to use conditional tags than you can use the code given below. The code given below is same as the above code. I have just added conditional tag to show only in post pages.

<b:if cond='data:blog.pageType == "item"'>
<!-- SyntaxHighlighter starts -->
<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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.strings.viewSource = "Copy code from here";
SyntaxHighlighter.defaults['smart-tabs'] = true;
SyntaxHighlighter.defaults['toolbar'] = true;
</script>
<!-- SyntaxHighlighter ends -->
</b:if>
There are many more codes supported but you should not add the codes which is not necessary for your blog as it may slow down your page loading time. If you don't like the latest version of Syntax Highlighter i.e., 3.0.83 than you can replace current with the version you like. For eg. if you like Syntax Highlighter version 2.1.382 than replace current from the above code with 2.1.382. You must not remove code written in Yellow in the above code if you use it to highlight codes in Blogger Platform.
You can also customize Syntax Highlighter. Syntax Highlighter offers many themes and skins to choose from. To change the theme style, just replace the blue text from the above code with the theme style you like. You can check out their official site to check out the available themes.

Highlighting Codes in Post
Syntax highlighter will look for <pre></pre> tags which includes class brush. It means you will have to add your codes between pre tags in your post. See the code below to make it easier to understand.
<pre class='brush:xml'>
Enter your code here
</pre>
You can add the code which you want to highlight in place of  "Enter your code here". See text in red in the above code. You can replace xml with the type of code you are showing. Xml is used to highlight HTML codes. If you want to highlight HTML code than use xml instead. But make sure you escaped the HTML characters before adding your code. To Highlight codes in Blogger follow below steps.
  • Go to Blogger post editor.
  • Switch to HTML mode. and paste the code given below.
<pre class='brush:xml'>
Enter your code here
</pre>
  •  Now add the codes which you want to highlight in place of "Enter your code here".
  • Now you can save or publish your post.
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!

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...