File Under: JavaScript, Visual Design

Prism: Beautiful Code-Highlighting for the Web

Deliciously meta: the Prism source code, highlighted with Prism. Image: Screenshot/Webmonkey

Prism is a slick new JavaScript library that adds a very attractive syntax highlighter to any website with a mere 1.5KB (minified & gzipped) of extra bandwidth.

PrismJS started life as the highlighter for Dabblet (which we looked at previously), but popular demand convinced developer Lea Verou to extract the library and release it as a standalone project.

Even if you’re happy with Pygments or another popular syntax highlighter, Prism is worth a look if only because its default syntax highlighting color schemes are beautiful.

Other things we like include the ability to add new color schemes and languages, as well as a plugin system for extending Prism. For the launch Verou has made three plugins available — line highlighting, a “Show Invisibles” tool and an autolinker to make URLs and emails in source code clickable. We also like the fact that Prism doesn’t force you to use any Prism-specific markup; just use <code> tags, along with the recommended way to define a code language in HTML 5 — by adding a language-xxxx class — and Prism does the rest.

As with anything cool on the web there is one catch to be aware of — namely Internet Explorer 8 and below, which Prism doesn’t support. It shouldn’t cause any problems for older versions of IE, but those users won’t see the pretty code highlighting.

For a full list of features — and a few limitations to be aware of — head over to the new Prism page.