Thursday, August 5, 2010

Using SyntaxHighlighter 3.0+ on your blog

You can guess from the title that this is a Techie blog and that means I will be posting some code snippets from time to time and so I was looking into some options of code syntax highlighting and I narrowed it down to the awesome SyntaxHighlighter. I use a custom domain name but host my blog on blogger. I also use the awesome Windows Live Writer for posting.

Setting SyntaxHighlighter up was fairly easy but I did find a ton of blog posts on the web about how to do that with varying information. A lot of these posts were so old that they just misdirect you and deprive you from using the all the great features that the latest version offers so I thought I might take a moment to post the best solution that I know so far. Here goes,

Things you should know
SyntaxHighligher is a completely javscript and css based solution to syntax highlighting and it works on the client side and does not require you to embed inline styles and css. Now that is great with one drawback. Since the scripts are hosted (either on your site or somewhere on the web) and are linked on your website pages they will not make it to your RSS feed so most readers will not be able to show the highlighting. Personally, I think it is alright but if you don’t agree stop right here, SyntaxHighligher is not for you.

So How to Set it up then
As I said most of the information on the web is old so those posts tell you to link all the the brush JS on your page but from version 3.0 onwards SyntaxHighlighter has a nifty little feature for auto loading just the required brushes rather than linking all of them. Now if you don’t understand what I am talking about don’t worry, it’s even better since you don’t have to “unlearn” anything :-). Just follow the steps below to set it up for your blogger blog!

Step 1: Add the css and JavaScript links in the <head> section of your blog

<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>



Now notice that Alex Gorbatchev is actually providing free hosting for the required JavaScripts and CSS so you don’t have to worry about getting a place to host them. Also you will always point to the latest version if you just point to the “Current” directory.



Step 2: Setup Autoloader for brushes by adding the following javascript function again in the <head> section of your blog



<script language='javascript'>

function path()
{
var args = arguments,
result = [];

for(var i = 0; i != (args.length-1); i++)
result.push(
args[i].replace(&#39;@&#39;,&#39;http://alexgorbatchev.com/pub/sh/current/scripts/&#39;));


return result
};
</script>


Now blogger actually changes the single quotes to &#39; for you or you can post it encoded like above. Either ways it should be fine.



Step 3: Call to action – Use the JS to highlight all the sections on your blog, insert the script below just above </body> tag.



<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;

SyntaxHighlighter.autoloader.apply(null, path(
&#39;applescript @shBrushAppleScript.js&#39;,
&#39;actionscript3 as3 @shBrushAS3.js&#39;,
&#39;bash shell @shBrushBash.js&#39;,
&#39;coldfusion cf @shBrushColdFusion.js&#39;,
&#39;cpp c @shBrushCpp.js&#39;,
&#39;c# c-sharp csharp @shBrushCSharp.js&#39;,
&#39;css @shBrushCss.js&#39;,
&#39;delphi pascal @shBrushDelphi.js&#39;,
&#39;diff patch pas @shBrushDiff.js&#39;,
&#39;erl erlang @shBrushErlang.js&#39;,
&#39;groovy @shBrushGroovy.js&#39;,
&#39;java @shBrushJava.js&#39;,
&#39;jfx javafx @shBrushJavaFX.js&#39;,
&#39;js jscript javascript @shBrushJScript.js&#39;,
&#39;perl pl @shBrushPerl.js&#39;,
&#39;php @shBrushPhp.js&#39;,
&#39;text plain @shBrushPlain.js&#39;,
&#39;py python @shBrushPython.js&#39;,
&#39;ruby rails ror rb @shBrushRuby.js&#39;,
&#39;sass scss @shBrushSass.js&#39;,
&#39;scala @shBrushScala.js&#39;,
&#39;sql @shBrushSql.js&#39;,
&#39;vb vbnet @shBrushVb.js&#39;,
&#39;xml xhtml xslt html @shBrushXml.js&#39;,
&#39;xml @shBrushXml.js&#39;
));
SyntaxHighlighter.all()
</script>


Notice I am using the new AutoLoader functionality and also since my blog is hosted on Blogger I am setting the bloggerMode to true. If your blog/website is different you should not set this flag and the rest of the setup should be the same for you. Also notice I have added XML brush twice one as a part of the xml xhtml.. group and one as a stand alone item. This was done to work around an issue with the WLW plug-in that I use so if you are not using it then you can remove that. Keeping it the way it is doesn’t hurt too. 



Step 4: Add the sections that you want to highlight and set the correct CSS class



<pre class="brush: css; toolbar: false;">

public static void main()


{


    Console.WriteLine(&quot;Highlight me!&quot;);


}


</pre>



And if everything is setup correctly it should look like below,



public static void main()
{
Console.WriteLine("Highlight me!");
}


A complete list of brushes can be found here. And the complete list of Settings can be found here. But wait, why remember these brushes and settings, why not install the awesome PreCode Snippet plug-in for the Live Writer and let the plug-in handle that for you. Once you install the plug-in you should be able to fire up the plug-in window like below and go crazy..



image



Wow, this post got long! But hopefully it will save people some time. And hey, this post will be a good test to see if I set it up correctly or not.

20 comments:

  1. Thanks for your informative article and the blog. Your article is very useful for .net professionals and freshers looking for interview. Best DOT NET Training | Dot Net course Chennai

    ReplyDelete
  2. Thanks for sharing use interview questions on .Net technology. While preparing for my job interview, your article helped me a lot to sharpen my skills and do well in my interview. One of trainer from leading dot net training in Chennai suggests me about your site.

    ReplyDelete
  3. Thanks Admin for sharing such a useful post, I hope it’s useful to many individuals for developing their skill to get good career. SAS Training in Chennai

    ReplyDelete
  4. Thank you for this brief explanation and ver nice information. well, got a good knowledge. Have a nice idea, this is more helpful to me. This can gives the better performance.
    Dotnet Training in Chennai

    ReplyDelete
  5. this is really awesome and informative blog today i came to know about Iseialize concept clearly it is really good thanks for sharing.

    sas training in chennai

    ReplyDelete
  6. First is to thank you for all this informative posts you give us for free; i bet all of us are happy.
    Such a great idea of yours! You have been a big help for me. Thanks a lot. more post for interesting topic. Great!

    SAP training in Chennai

    ReplyDelete
  7. Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    Hadoop Training Chennai | PHP Training in Chennai

    ReplyDelete
  8. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    SAS Training in Chennai | SAS Course in Chennai

    ReplyDelete
  9. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    Dot net training in Chennai | dot net course in Chennai

    ReplyDelete
  10. Much obliged to you for requiring significant investment to give us a portion of the valuable and restrictive data with us.
    Regards,
    SAS Training in Chennai | SAS Course in Chennai | SAS Training Institute in Chennai

    ReplyDelete
  11. Thank you for this valuable information. I have got some important suggestions from it. Get your business to the next level in simple steps.
    erp software company in chennai | erp software providers in chennai.

    ReplyDelete
  12. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    CCNA Training Center in Chennai | CCNA Training in Chennai | Best CCNA Training in Velachery | Online CCNA Training in Chennai

    ReplyDelete
  13. http://www.hparikh.com/2010/08/using-syntaxhighlighter-30-on-your-blog.html

    Java Training Institute in Chennai

    ReplyDelete
  14. I would like to say thank you for the amazing details and concepts you are sharing in this.
    Webseiten Gestaltung L├╝denscheid

    ReplyDelete