Tuesday, June 2, 2009

SyntaxHighlighter For Clojure

I'm really surprised that Blogger doesn't include a solution for syntax highlighting as it hosts a ton of blogs related to programming. Fortunately, there are plenty of third party solutions out there. I've settled on SyntaxHighlighter, and while it's not perfect, it does a good enough job. With Clojure being as new as it is, SyntaxHighlighter doesn't include a brush file for the language. This should change in the future since I have submitted a brush to the author and have been informed that it will be included in the next release. In the meantime, here's the file which provides highlighting support for a good number of common functions.
SyntaxHighlighter.brushes.Clojure = function()
{
  // Contributed by Travis Whitton

  var funcs = ':arglists :doc :file :line :macro :name :ns :private :tag :test new alias alter ' +
              'and apply assert class cond conj count def defmacro defn defstruct deref do '     +
              'doall dorun doseq dosync eval filter finally find first fn gen-class gensym if '  +
              'import inc keys let list loop map ns or print println quote rand recur reduce '   +
              'ref repeat require rest send seq set sort str struct sync take test throw '       +
              'trampoline try type use var vec when while';

  this.regexList = [
          { regex: new RegExp(';.*$', 'gm'),                               css: 'comments' },
          { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' },
          { regex: /\[|\]/g,                                               css: 'keyword' },
          { regex: /'[a-z][A-Za-z0-9_\-]*/g,                               css: 'color1' }, // symbols
          { regex: /:[a-z][A-Za-z0-9_\-]*/g,                               css: 'color2' }, // keywords
          { regex: new RegExp(this.getKeywords(funcs), 'gmi'),             css: 'functions' }
      ];

  this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
}

SyntaxHighlighter.brushes.Clojure.prototype     = new SyntaxHighlighter.Highlighter(); 
SyntaxHighlighter.brushes.Clojure.aliases       = ['clojure', 'Clojure', 'clj'];

11 comments:

  1. Thanks for your work on this!

    Hope you don't mind that I added your code as a downloadable syntax file to my compiled list of SH Brushes, of course with credits to you :)

    If you have updates of the code, please let me know and I'll update my references too

    ReplyDelete
  2. I found a small bug with your brush - keywords with dashes aren't fully colored. Just add a dash to the pattern:

    { regex: /:[a-z][A-Za-z0-9_\-]*/g, ...

    Might be applicable to the preceding line, too.

    ReplyDelete
  3. Hmm, another bug. Are you sure the comment highlighting was working for you? This should do the trick:

    { regex: /;.*$/gm, css: 'comments' },

    ReplyDelete
  4. Made corrections based on suggestions above. Thanks guys!

    ReplyDelete
  5. I found a small bug with your brush - keywords with dashes aren't fully colored. Just add a dash to the pattern:

    ReplyDelete
  6. I'm really surprised that Blogger doesn't include a solution for syntax highlighting as it hosts a ton of blogs related to programming

    ReplyDelete
  7. Comments are still not showing up. Not really sure why.

    ReplyDelete
  8. Thanks for writing this, it's really appreciated. I started using it on my blog and I noticed comments are not highligted as comments, so I'd like to make that feature request. You can check out how they look now here: http://pupeno.com/2011/08/12/the-joyful-clojure-example-code-convention/

    ReplyDelete
  9. I created a git repository in GitHub for this brush, so there's a single canonical place for it to receive and track bug requests as well as the improvements, pull requests, etc:

    https://github.com/pupeno/clojure_brush

    I also did some fixes, so the code looks quite differently.

    ReplyDelete
  10. Hi there, I found your blog by the use of Google whilst searching for a comparable topic, your website came up, it seems to be good. I’ve bookmarked it in my google bookmarks.
    website design

    ReplyDelete