Sunday, 1 December 2013

Easy Steps to Integrate SyntaxHighlighter in Blogger

Most Bloggers & developer when sharing their codes on blog or website want their code to be properly highlighted with keywords, alignation & syntax, but Blogger or Wordpress don't have any solution for this thing.

What most Bloggers do is tweak their Blockquotes to embed your source between:

Those who don’t know what Blockquote is : It is HTML tag that prevents code inside them from getting parsed.

But for the proper formatting along with separate colours for Keywords & highlighting used to quote this method is ineffective.So, we are sharing an excellent solution for this problem.

There’s an excellent open source tool called SyntaxHighlighter which can solve all above problems.It’s a ready to use Javascript based Code with extensive features & multiple other options.

STEP 1: HOW TO INTEGRATE SyntaxHighlighter in Blogger :

Follow the below simple steps: 1) Go to your Template Layout & Download your template as a backup first.

2)Now click Edit HTML for Layout .

3)Paste the below code in your Template before your
tag ends.



STEP 2: Now to add your code, Just put your code in any of the following two methods :

First Method (This method doesn’t require parsing code before adding):

Second Method (This method requires parsing code before adding):

Customisation / Tweaking : Your can change highlighting for various languages by changing the Brush alias as following in Code mentioned in STEP 2 : or

Following Brushes are supported in SyntaxHighlighter :
Brush nameBrush aliasesFile name
ActionScript3 as3, actionscript3shBrushAS3.js
Bash/shell bash, shellshBrushBash.js
ColdFusion cf, coldfusionshBrushColdFusion.js
C# c-sharp, csharpshBrushCSharp.js
C++ cpp, cshBrushCpp.js
CSS cssshBrushCss.js
Delphi delphi, pas, pascalshBrushDelphi.js
Diff diff, patchshBrushDiff.js
Erlang erl, erlangshBrushErlang.js
Groovy groovyshBrushGroovy.js
JavaScript js, jscript, javascriptshBrushJScript.js
Java javashBrushJava.js
JavaFX jfx, javafxshBrushJavaFX.js
Perl perl, plshBrushPerl.js
PHP phpshBrushPhp.js
Plain Text plain, textshBrushPlain.js
PowerShell ps, powershellshBrushPowerShell.js
Python py, pythonshBrushPython.js
Ruby rails, ror, rubyshBrushRuby.js
Scala scalashBrushScala.js
SQL sqlshBrushSql.js
Visual Basic vb, vbnetshBrushVb.js
XML xml, xhtml, xslt, html, xhtmlshBrushXml.js

You can also change themes of SyntaxHighlighter accordingly by changing theme CSS in code mentioned in Step 1. Change the following line : Following Themes are present in syntax Highlighter :
Default shThemeDefault.css
It looks like :
Django shThemeDjango.css
It looks like :
Eclipse shThemeEclipse.css
It looks like :
Emacs shThemeEmacs.css
It looks like :
Fade To Grey shThemeFadeToGrey.css
It looks like :
Midnight shThemeMidnight.css
It looks like :
RDark shThemeRDark.css
It looks like :