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.

PASTE THE FOLLOWING CODE :

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 name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.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 :

Name	File
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 :