I've been looking for a good Javascript-based syntax highlighter, and it looks like Prism is it. It fulfills just about all my criteria: works on code blocks whether inline or in block elements, is HTML5-friendly, uses classes on spans rather than hard-coded styles, and is easy to extend. It's what is running on the website now.
But it's not actually perfect; it mucks about with class names more than I would like (though it isn't really a problem), and it uses a different name for HTML--class="language-markup" rather than class="language-html". That is easy to fix; just do Prism.languages.html = Prism.languages.markup and you're done. The biggest downside (though not one that affects me in real life; it just seems inelegant) is that it flattens the text to analyze it (it uses var code = element.textContent.trim();. It ought to be possible to use my range routines to wrap elements without flattening them.
Be that as it may, it works well; see just about any post on the blog.
Plugins for other languages:
- PHP, based almost completely on Aaron Harun's code.
- Lisp/Scheme
- Visual Basic
Plus I added a Prism.languages.markup.jquery= /\$|jQuery/ so I could mark it up separately.
Leave a Reply