Friday, January 1, 2010

Syntax Highlighting with Blogger Engine

Introduction

I've been using Blogger as my blogging engine for a couple of weeks. I've been quite impressed at how easy it makes it to update your blogs look and feel and how free you are with the HTML and semantic layout of the pages.
One thing that seemed to be missing was allowing developers to copy and paste code into their blogs and allow other users to copy and paste the code from the blog into their own code.

Using SyntaxHighlighter Javascript Library

So in my search to find something better i came across this post which uses syntax highlighter.

Adding Syntax Highlighter to Blogger Template


  • Copy the following code
<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> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushCss.js' type='text/javascript'></script> 
<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/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.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/shBrushVb.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/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

  • paste it into your Blogger Template just above the </head> tag
  • Save the template
  • Then you can start creating code blocks in your existing or new Blog entries.
  • There are 2 ways to add a code block using syntaxhighlighter


Method 1: Using the script Tag



becomes:



Method 2: Using the pre Tag



becomes:

// Comment
public class Testing {
    public Testing() {
    }

    public void Method() {
        /* Another Comment
           on multiple lines */
        int x = 9;
    }
}

Code Containing Less that or Greater than

One person noticed that if you try and publish any code with < or > in it, you'll need to HTML Encode the code before adding it to the blog post using something like this. Then you'll be able to publish code with generic's such as the following:

static Dictionary<int, List<Delegate>> _delegate = new Dictionary<int, List<Delegate>>();

Conclusion

I have to say i'm pretty impressed. There are a couple of things you have to watch out for:
  • The java script uses the <code> Tag. So as lots of blogger templates have styles for this tag you have to remove any styles before it looks like the above.
  • If you paste in HTML or XML with <Tags>. You'll need to HTML encode them. Which is a bit of a shame, as i was hoping the CDATA would help get around that problem. Maybe in the next version.

34 comments:

  1. Thanks for the great tutorial on setting this up, I've now integrated it with my blog, Reflections of a Software Engineer.

    One thing to note is that you can pick and choose the "Brush" types included in the header. For example, if you don't want 'Perl', you can sefely remove this line '<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>' and speed up the page load.

    ReplyDelete
  2. Very good point.. I've just updated my script and taken out any brushes that i don't use. Thanks

    ReplyDelete
  3. Perfect. Thanks, David
    P.S. - Fix captcha. Couldn't post comments normally.

    ReplyDelete
  4. Does the preview work? I've added the code above to my template, but when I preview a new post I don't see any formatting.

    ReplyDelete
  5. Glen, Just checked out your blog. Looks like you already have syntax highlighting. I can assure you it works.. As i did it for this post. Let me know if I can help you out.. Have you followed the instructions correctly? Also i know a few other people have managed to get it working.

    ReplyDelete
  6. Thank you very much, this has been really helpful! :)

    ReplyDelete
  7. Very helpful post! You made it so easy.
    I hope Blogger doesn't screw it up.

    ReplyDelete
  8. I'm with Glen in that I can't get it to work.

    Copy 20-line code and paste above /head............ check
    Save new template ..................................check
    Copy example code into new post ....................check
    Publish post .......................................check
    if (test = true)
    printf("Cool\n");
    else
    printf("Rats\n");

    ReplyDelete
  9. Hi,

    Here's the installation instructions from the people that wrote the thing..

    http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

    ReplyDelete
  10. It's a great tool. My only slight quibble is that it doesn't truly reflect how C# code looks by default in Visual Studio. E.g., the font isn't Courier New, and the names of classes show up in black rather than cyan. It'd be even better if those few remaining issues were addressed.

    ReplyDelete
  11. @RP if you host the css for C# yourself, you could simply change those styles or @import your own at the end of the style sheet to override them. If you dont want to host that css file yourself - place those changed styles in the head of the template, after you import them. These new rules should override anything imported as they appears afterward....

    ReplyDelete
  12. and yes I had a problem with capcha too - your footer (newer Post Home older post) is hiding it.

    ReplyDelete
  13. thanks for information. 'll try this..

    ReplyDelete
  14. I think the problem with the Capcha has gone away now, as i've updated my blogger template.

    ReplyDelete
  15. thanks for this information. Worked for me!

    ReplyDelete
  16. Love the display, but the horizontal scroll bar doesn't work for me... any suggestion as to how to debug this?

    ReplyDelete
  17. Thanks David. I've included this on my blog - http://jaykhimani.blogspot.com. Previously I used some home grown CSS which provided me very basic code formatting. Now this is great.

    ReplyDelete
  18. Loading all the javascript files is a disadvantage here

    ReplyDelete
  19. Great script ! is saving me from a bad headache, thanks a lot

    ReplyDelete
  20. Thank you! My site looks much better now.

    ReplyDelete
  21. Just came across this as I was looking for including code snippets in my blog (http://knowledgestockpile.blogspot.com). Thanks for your clear explanation. This will make including code snippets easier.

    ReplyDelete
  22. what a great tutorial, can you make for pascal programming language? I know all keyword (I think) and also comments and preprocessor tags, all data type in pascal have same color (except string. because in pascal, string is keyword). I'd try to make it by my self, but i dont understand when i try to add preprocessor and comment format

    ReplyDelete
  23. Thank You! Thank You! And Thank You again!!!

    ReplyDelete
  24. A lot of thanks friend...!!!

    http://www.andolasoft.com/services/asp.net-application

    ReplyDelete
  25. Thanks, works ok.

    Sample: http://drerimix.blogspot.com/2011/06/developing-objectice-c-on-windows-pc.html

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. just cant get this working. http://coffeeaidedcoding.blogspot.com/2011/06/test.html

    do you see anything im doing wrong there. Can you please share the templage you are using, just to try out with that n see if that makes any difference.

    ReplyDelete
  28. thanks for your introducing..
    Especially the first point of conclusion about <code> is so useful to avoid the mistake.
    Great!

    ReplyDelete
  29. Wow thanks for this.
    Have added to my site.
    Thanks so much for the help

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Hi, thanks for this post.
    However, there is still one problem when source code contains '<' or '>'. You can image posting some codes trying to #include some head files. I think the reason is that these characters will confuse Blogger with real HTML tags. Do you have ideas to solve this?

    ReplyDelete