<Glazblog/>

I have decided to trash my source-editor code (Diavolo) and rewrite it because I was really not happy with my scanner. The first step, the read-only one, is almost ready for public consumption if you're a XUL app author.

Diavolo is totally language-agnostic wrt the source code you want to render so the very first thing you have to do to syntax-highlight some source is create a grammar for your code. You can find an example for the complete CSS grammar here. The structure of that file is probably trivial to understand if you have any knowledge of parsing and regexps, so I'll write about it later, in another article.

The second thing you have to do is create a stylesheet to give styles to all occurences of the role attribute in the grammar used as a class name. See an example for CSS.

The third thing you need to do is an inclusion of tokeniser.js and highlighter.js in your XUL app.

Then have an <iframe> element somewhere in your XUL page and call the following:

var dummy = new DiavoloHighlighter(aSource, aGrammarURL, aStylesURL, aXULElt);

where aSource is a string holding the source code to highlight in the iframe, aGrammarURL a URI spec to the grammar XML file, aStylesURL a URI spec to the associated stylesheet if any, and aXULElt your <iframe> element. For the time being, the code assumes the two URI  specs are chrome or file. That's all.

Here's the result, with syntax highlight and underlining of errors:

That's all for the time being, but it's a very early unoptimized version. In a future version, the parser in Diavolo will be usable for other applications, not just Diavolo's syntax highlight or source editor. Of course, the final version will offer source editing...