Alex has released the latest version (3.0.83) but we will use the old version (2.1.383) as it contains the options I mentioned above. Each code type comes with a script called Brush. I have used the most popular brushes as I mentioned earlier but if you wish to use a brush of your choice then you can select one from this Brush list.
How To Add Syntax Highlighter In Blogger?
The steps are more simple than you can imagine. I have tried to make the installation as easy as possible. Follow these steps,
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for this,
4. And just below it paste the following code,
<!--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'/>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
<!--SYNTAX HIGHLIGHTER BY MBT ENDS-->
5. Save your template and you are done!
How it works?
Whenever you wish to share a code of any type with your readers, simply enclose the code between these lines,
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
ADD THE PARSED CODE HERE
I have combined all brushes into one making it easier for newbie to implement the tutorial.
Note: Do not add the code directly because you will get error in Blogger Editor, instead first parse the code using the Parser Tool provided by us.
Replace ADD THE PARSED CODE HERE with the parsed/encoded code and publish your post to the see the magic.
That's it! Hope you like it. I will publish different color schemes for Syntax Highlighter in my next posts so make sure you don't miss the update. I also published some block quotes with auto number list and if you wish you can use them instead by reading this tutorial,
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »