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.

47 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
  15. Interesting post! This is really helpful for me. I like it! Thanks for sharing!
    microsoft office online

    ReplyDelete
  16. Interesting post! This is really helpful for me. I like it! Thanks for sharing!
    online marketing lüdenscheid

    ReplyDelete
  17. Good post and I like it very much. By the way, anybody try this app development company for iOS and Android? I find it is so professional to help me boost app ranking and increase app downloads.

    ReplyDelete
  18. Impressive blog with lovely information. really very useful article for us thanks for sharing such a wonderful blog... No.1 Software Testing Training Institute in Chennai | Best Selenium Training Institute in Chennai | ISTQB Certification Center in Velachery

    ReplyDelete
  19. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
    Java Training in Chennai | Web Designing Training Institute in Chennai | DotNet Training Institute in Chennai

    ReplyDelete
  20. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.
    MCA Project Center in Chennai | MCA Project Center in Velachery

    ReplyDelete
  21. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
    No.1 IOS Training Institute in Chennai | Best IOS Training Institute in Velachery

    ReplyDelete
  22. I really love reading and following your post as I find them extremely informative and interesting. This post is equally informative as well as interesting.No.1 IOS Training Institute in Velachery | Best Android Training Institute in Velachery | Core Java Training Institute in Chennai

    ReplyDelete
  23. It is most knowledgeable information like this.I will read this article it is very easy to learn this blog.
    No.1 IOS Training Institute in Velachery | Best Android Training Institute in Velachery | Core Java Training Institute in Chennai

    ReplyDelete
  24. You made some good points there. I did a search on the topic and found most people will agree with your blog.Ethical Hacking Training Institute in Chennai | Ethical Hacking Training in Velachery

    ReplyDelete
  25. Very happy to see this blog. Gives a wonderful information with coded explanation. Thank you for this blog. very useful to me.
    Java Training Center in Chennai | Best J2EE Training Center in Chennai | No.1 Java Training Institution in Velachery | Core Java Training in Chennai

    ReplyDelete
  26. The website is looking bit flashy and it catches the visitors eyes. A design is pretty simple .
    regionale stellenbörse

    ReplyDelete
  27. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    aws training in Chennai

    ReplyDelete
  28. Those guidelines additionally worked to become a good way to
    recognize that other people online have the identical fervor like mine
    to grasp great deal more around this condition.

    white label website builder

    ReplyDelete
  29. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it…
    Best Microsoft Azure Training Institute in Chennai | Best Microsoft Azure Training Institute in Velachery

    ReplyDelete
  30. The strategy you have updated here will make me to get trained in future technologies. By the way you are running a great blog. Thanks for sharing this
    Best Advanced Excel Training Institute in Chennai | Best Advanced Excel Training Institute in Velachery

    ReplyDelete