Syntax Highlighter is a utility used to highlight the code from rest of the content in a web page so that the code readability is enhanced.In this blogpost we are going to add syntax highlighter to blogger.
SyntaxHighlighter by Alex Gorbatche is one of the most popular syntax highlighter available.
It is developed in javascript and can be easily installed in the blogger blogs.
It is used by Apache, Aptana, Wordpress, Smashing Magazine and others.
It supports almost all the major languages used.
It is highly modular in architecture and there are different javascript files for highlighting different languages code.For example for highlighting javascript code you need to include shBrushJScript.js
The javascript files used for different languages is know by alias of shBrush or Brush files.
There are two flavors of this plugin.
1. In the first flavor all the brushes you need will be loaded at once whether you are going to utilize it in that page or not.
2. In the second flavor the brushes that are actually needed will be only loaded.This is lazy loading of the brushes files.
Setup
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/> <!-- Default Theme --> <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css ' rel='stylesheet' type='text/css'/> <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/>Before continuing further go to your blog dashboard, click on the template, then edit HTML and go to the </body> tag in the template.
All the code mentioned in the below flavors need to be pasted just above the </body> tag of your template
1. First Flavor
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/>For highlighting HTML / XML we need to include shBrushXml.min.js
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js ' type='text/javascript'/>Then we need to start the plugin
<script type="text/javascript"> SyntaxHighlighter.all() </script>
Overall Code
<!-- Core css --> <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/> <!-- Default Theme --> <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css ' rel='stylesheet' type='text/css'/> <!-- Core javascript--> <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/> <!-- Javascript brush--> <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js' type='text/javascript'/> <!-- HTML brush--> <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js ' type='text/javascript'/> <!-- Start the syntax highlighter--> <script type="text/javascript"> SyntaxHighlighter.all() </script>
2. Second Flavor
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js' type='text/javascript'/>We start the plugin by using below javascript
<script type='text/javascript'> SyntaxHighlighter.autoloader( 'javascript //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js', 'html //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js' ); SyntaxHighlighter.all(); </script>
Overall Code
<!-- Core css --> <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css' rel='stylesheet' type='text/css'/> <!-- Default Theme --> <link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css ' rel='stylesheet' type='text/css'/> <!-- Core javascript--> <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js' type='text/javascript'/> <!-- Autoloader javascript--> <script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js' type='text/javascript'/> <!-- Start the autoloader script and syntax highlighter --> <script type='text/javascript'> SyntaxHighlighter.autoloader( 'js jscript javascript //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js', 'xml html //cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js' ); SyntaxHighlighter.all(); </script>
Usage
<pre class="brush: javascript"> function Employee(){ this.getName = function(){ console.log("Calling getName of Employee class"); }; }; </pre>
Themes
Default (shThemeDefault.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.min.css' rel='stylesheet' type='text/css'/>
Django (shThemeDjango.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDjango.min.css' rel='stylesheet' type='text/css'/>
Eclipse (shThemeEclipse.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css' rel='stylesheet' type='text/css'/>
Emacs (shThemeEmacs.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.min.css' rel='stylesheet' type='text/css'/>
Fade To Grey (shThemeFadeToGrey.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeFadeToGrey.min.css' rel='stylesheet' type='text/css'/>
Midnight (shThemeMidnight.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeMidnight.min.css' rel='stylesheet' type='text/css'/>
RDark (shThemeRDark.css)
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeRDark.min.css' rel='stylesheet' type='text/css'/>
All the files used for this syntax highlighter is hosted on cdnjs (public cdn for javascript) To find more brushes and themes browse https://cdnjs.com/libraries/syntaxhighlighter Special thanks to SyntaxHighlighter creator
Alex Gorbatchev for this very useful plugin.
Kindly share your feedback in the comments section
Nice Work Sir :)
ReplyDelete