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:

Plus I added a Prism.languages.markup.jquery= /\$|jQuery/ so I could mark it up separately.

Leave a Reply


Warning: Undefined variable $user_ID in /home/public/blog/wp-content/themes/evanescence/comments.php on line 75