SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. It was originally created in 2004 and is still maintained by Alex Gorbatchev.
Let's see how we can add it to the Blogger (Blogspot) blog to be able to highlight the posted source code snippets.
Here is the code you need to drop right before your <HEAD> tag in the HTML of your blogger template. First we add CSS styles, second - the syntax highlighter itself, then brushes of languages we want to highlight and at the end we call the SyntaxHighlighter object to configure blogger mode (switching on the Blogger support) and run it.
The Brush files are JavaScript files which add the syntax highlighting support for a given programming language. If you use my snippet as is then just remove any lines for languages you don't plan to use.
<!-- First we add CSS styles -->
<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/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<!-- Second we add JS scripts -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>
<!-- Then we add Brushes -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.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/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.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/shBrushCpp.js' type='text/javascript'></script>
<!-- At last we call SyntaxHighlighter -->
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
As you could note I've directly referenced all Brushes I need to and didn't use the new Autoloader function introduced in version 3.0 just because I didn't manage to make it work on my blog. The old way still works fine.Another thing to mention here is URL path of all referenced files. All of them point to the CURRENT version of SyntaxHighlighter so when they are updated you get the newest version automatically.
What's New in 3.0.83 release.
Visit the home page
Hi, the autoloader works for me. You need to modify the "for loop" expression at path() function. Change < to < will do the trick.
ReplyDeletefor(var i = 0; i < args.length; i++)
...
hey,
ReplyDeleteI tried many recipes from suggestions online but none worked. When my code at best gets the "courrier" font, but nothing else... :( any idea why?
Thanks
Very good, my friend.
ReplyDeleteThanks for the tip.
=)
Nice Post...but to customize it by removing the javascript?
ReplyDeleteJayRyan'sBlog was inviting you to be a Guest Post Author..
Thank you so much.
-jayryan09-
I have added a similar post here
ReplyDeletehttp://fundapass.blogspot.in/2012/09/how-to-use-syntax-highlighter-in-blogger.html