Wednesday, May 27, 2009

Blogger source code syntax highlighting

If you've read my last few blog posts you might have noticed that my code snippets now have syntax highlighting that looks similar to Flex Builder.

I've found many people asking how to get syntax highlighting to work on source code that is pasted into Blogger. Most solutions use CSS and Javascript to accomplish that with varying levels of success. I've chosen to go a different route and am using a parser to turn ActionScript text into html which I then paste right into a blog post (under "Edit Html").

I'm using a slightly modified version of this amazing free parser called Java2Html created by Markus Gebhard (GNU License). It is a Java Swing application (or Applet) that takes in input text and outputs html which you can easily copy and paste into a blog. The original version (which I believe is last updated in 2006) has three different style options - Eclipse, Kawa, and Monochrome. I've added a fourth option FlexBuilder that uses the default syntax highlighting styles found in ActionScript.

If you want to try out my version, I've posted the applet here: java2html

Here are some of the options you can use (in the panel on the right side):
  • Style - choose one of the 4 code styles (use FlexBuilder for ActionScript)
  • Line numbers - shows line numbers in the html
  • Table border - draws a 2 pixel gray border around the code block
  • Background color - if checked then a white background color is set on the code block
  • Include <html> and <body> tags - if false then the output html doesn't inclde the <html> and <body> tags, only the content.
  • Use <br> at the end of lines - if false then the html won't contain <br> tags
  • Include new lines ("\n") - if false then the html won't contain new line characters. Turn this off if you want to paste your code into Blogger since it treats new lines as breaks!
  • CSS Class - by default the code block is wrapped inside a <div class="java"> tag. This option configures the class="java" part.

    • Again I can't take much credit for this. All I've really done is add a few of the options mentioned above and changed the parser slightly to work with ActionScript keywords (such as function, var, etc).

    Here is an example of a very simple code snippet with and without styling:
    private function get string():String {
    var str:String = "String";
    return str;
    }
    private function get string():String {
        var str:String = "String";
        return str;
    } 
                

    One more thing, I haven't tested the various Target options, I only use the default "XHTML 1.0 Transitional (inlined fonts)".

    Posted by Chris Callendar at 3:03 PM
    Labels: , , ,

    3 comments:

    Anonymous said...

    great job pal, keep this up

    July 1, 2009 at 1:21 AM
    Anonymous said...
    This comment has been removed by a blog administrator.
    March 27, 2022 at 6:36 PM
    Brody said...

    Hi thanks for postinng this

    April 17, 2022 at 7:40 PM

    Post a Comment

    Subscribe to: Post Comments (Atom)