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.

97 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
  31. This is really too useful and have more ideas from yours. keep sharing many things and thanks for sharing the information.

    Best python training institute in Kanchipuram

    ReplyDelete
  32. Nice and informative article. Thanks for sharing such nice article, keep on updating.

    CandC++ programming training academy in Kanchipuram

    ReplyDelete
  33. Nice post... Really you are done a wonderful job. Thanks for sharing such wonderful information with us. Please keep on updating...

    Best Java Training Academy in Kanchipuram

    ReplyDelete
  34. I have read your blog. It’s very informative and useful blog. You have done really great job. Keep update your blog.

    Best Tally Courses Training Academy in Kanchipuram

    ReplyDelete
  35. 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…

    Best Web Designing Training Academy in Kanchipuram

    ReplyDelete
  36. Thank you so much for sharing. Keep updating your blog. It will very useful to the many users.
    Best Web Designing Training Academy in Kanchipuram

    ReplyDelete
  37. I have read your blog its very attractive and impressive. I like it your blog.
    Best Software Testing Training Academy in Kanchipuram

    ReplyDelete
  38. Your Blog is nice and informative..Thanks for sharing this valuable information with us..I am visiting this website regularly, this web site sharing nice thoughts

    Best MATLAB Training Academy in Kanchipuram

    ReplyDelete
  39. Awesome post. Really you are shared very informative concept... Thank you for sharing. Keep on updating...
    Best ccnp Training Academy in Kanchipuram

    ReplyDelete
  40. Thanks for this grateful information. all this information is very important to all the users and can be used good at all this process.


    Best Web Designing Training Academy in Kanchipuram

    ReplyDelete
  41. really you have posted an informative blog. it will be really helpful to many peoples. thank you for sharing this blog. so keep on sharing such kind of useful blogs.

    Best TALLY ERP 9.0 Training Academy In Kanchipuram

    ReplyDelete
  42. 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.
    Best web Designing Training Training Institute in Kanchipuram

    ReplyDelete
  43. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.I am waiting for your next fantastic blog.Thanks for sharing.
    Best Tally erp9 Course Training Institute in kanchipuram|

    ReplyDelete
  44. Nice..You have clearly explained about it ...Its very useful for me to know about new things..Keep on blogging..
    Best JAVA and J2EE Course Training Institute in kanchipuram|

    ReplyDelete
  45. Hi, am a big follower of your blog. I am really happy to found such a helpful and fascinating post that is written in well manner. Thanks for sharing such an informative post. keep update your blog.
    Best CCNA Course Training Institute in kanchipuram|

    ReplyDelete
  46. Great post.Thanks for one marvelous posting! I enjoyed reading it;The information was very useful.
    Best Best Web Designing and Development Course Training Institute in kanchipuram|

    ReplyDelete
  47. great doing. and i happy to visit your blog to know about this wonderful information. thanks for sharing. keep updating.
    Best Best Web Designing and Development Course Training Institute in kanchipuram|

    ReplyDelete
  48. Your info is really amazing with impressive content..Excellent blog with informative concept. Really I feel happy to see this useful blog, Thanks for sharing such a nice blog..
    Best Python Course Training Institute in kanchipuram|

    ReplyDelete
  49. Very impressive and informative blog.. thanks for sharing your valuable information.. it is very useful and easy to learn as well... keep rocking and updating... looking further..
    Best Tally Erp9.0 Course Training Institute in kanchipuram|

    ReplyDelete
  50. Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
    Best Web Technologies Course Training Institute in kanchipuram|

    ReplyDelete
  51. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information, this is useful to me…
    Best Linux Certification Course Training Institute in kanchipuram|

    ReplyDelete
  52. Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
    Best Web Technologies Course Training Institute in kanchipuram|

    ReplyDelete
  53. Nice Post! It is really interesting to read from the beginning & I would like to share your blog to my circles, keep your blog as updated.
    Best Tally ERP 9 Course Training Institute in kanchipuram|

    ReplyDelete
  54. Interesting post! This is really helpful for me. I like it! Thanks for sharing!
    Best Graphic Designing Course Training Institute in kanchipuram|

    ReplyDelete
  55. Informative post indeed, I’ve being in and out reading posts regularly and I see alot of engaging people sharing things and majority of the shared information is very valuable and so, here’s my fine read.
    click here now
    click here for ecs status of pensioners
    click here to know centre location
    click here png
    click here to download (link 1)

    ReplyDelete
  56. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me
    Best PCB Training Course Training Institute in kanchipuram|

    ReplyDelete
  57. This is excellent information. It is amazing and wonderful to

    visit your site.Thanks for sharing this information, this is useful

    to me…no:1selenium automation training

    institute in kanchipuram.

    ReplyDelete
  58. your blog contain very useful information. Really hereafter I am very big follower of your blog..
    Best MATLAB Course Training Institute in kanchipuram|

    ReplyDelete
  59. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information, this is useful to me…no:1
    HP QTP / UFT Automation training institute in kanchipuram.

    ReplyDelete
  60. Great post....Thank you for posting the great content……I found it quiet interesting, hopefully you will keep posting such blogs…Keep updating your creative and awesome blog.
    Best Tally Erp9 Course Training Institute in kanchipuram|

    ReplyDelete
  61. The best thing is that your blog really informative thanks for your great information! I have got some important suggestions from it.
    Best Printed Circuit Board (PCB) Course Training Institute in kanchipuram|

    ReplyDelete
  62. The information you have deliver here is really useful to make my knowledge good. Thanks for your heavenly post.
    Best Best Web Designing and Development Course Training Institute in kanchipuram|

    ReplyDelete
  63. Interesting post! This is really helpful for me. I like it! Thanks for sharing!
    Best Tally erp9 Course Training Institute in kanchipuram|

    ReplyDelete
  64. Your post explain everything in detail and it was very interesting to read. Thank you sharing.
    Best Tally Erp9 Course Training Institute in kanchipuram|

    ReplyDelete
  65. I am read your post was very interesting good valid information
    keep sharing more information...
    Best Tally Erp9 Course Training Institute in kanchipuram|

    ReplyDelete
  66. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information, this is useful to me…
    Best Tally Erp9 Course Training Institute in kanchipuram|

    ReplyDelete
  67. Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
    No:1 Tally Training Academy in kanchipuram

    ReplyDelete
  68. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    No:1 Tally Training Academy in kanchipuram

    ReplyDelete
  69. Really it was an awesome information...very interesting to read..You have provided an nice blog....Thanks for sharing..
    Best JAVA / J2EE / J2ME Course Training Institute in kanchipuram|

    ReplyDelete
  70. Excellent post. I have read your blog it's very interesting and informative. Keep sharing.
    Best JAVA / J2EE / J2ME Course Training Institute in kanchipuram|

    ReplyDelete
  71. Nice post.. Really you are done a wonderful job. Thanks for sharing such wonderful information with us. Please keep on updating...
    Best C & C++ Course Training Institute in kanchipuram|

    ReplyDelete
  72. Very nice post here and thanks for it .I always like and such a super blog of these post.Excellent and very cool idea and great blog of different kinds of the valuable information's.
    Best Tally Erp 9.0 Course Training Institute in kanchipuram|

    ReplyDelete