Why we chose the Prism syntax highlighter

With our migration to Blogger we also decided to choose a new syntax highlighter. We were looking for something more lightweight and fast. In our search we found Prism.

What is Prism?

Prism is a lightweight, client-side syntax highlighter. It’s very fast, easy to configure and style.

Prism advantages

Here are the things we love about Prism and why we chose it:

Very small: only a few KB in size. Even if you add several languages and plugins it’s less than 20 KB.
Fast: from all the client-side syntax highlighters we tried, this is definitely one of the fastest.
Easy to add new languages: it’s very easy and quick to add new languages (based on regexes).
Plugin architecture: not only is it easy to create new plugins, but this also keeps the core small and you can choose the functionality that you will actually use.
Support for nested languages: e.g. CSS and JavaScript in HTML.

Prism disadvantages

Prism also has its share of limitations. Here are its biggest downsides:

No support for IE8 or earlier: only IE9+ and other modern browsers are supported.
Few languages: because this is a recent syntax highlighter, its lacking several programming languages compared to more well known and established syntax highlighters.
Regex based: syntax highlighting will fail on certain scenarios.

How to use Prism

Usage is similar to other syntax highlighters. First you include Prism’s CSS and JS files:

<!DOCTYPE html>
<html>
<head>
 ...
 <link href="prism.css" rel="stylesheet" />
</head>
<body>
 ...
 <script src="prism.js"></script>
</body>
</html>

Then you wrap source-code with a pre and code block, specifying the language in the class, like this:

<pre><code class="language-css">body {
    color: #333;
    font-family: Arial, sans-serif;
}</code></pre>

How to add new languages to Prism

These are some of the languages we added. They are not complete, but serve basic usages.

Since they are similar to one of the base languages, we made use of the extension functionality.

ActionScript 3

Prism.languages.as3 = Prism.languages.extend('clike', {
 'keyword': /\b(class|dynamic|extends|implements|import|interface|new|case|do|while|else|if|for|in|switch|throw|intrinsic|private|public|static|get|set|function|var|try|catch|finally|while|with|default|break|continue|delete|return|final|each|label|internal|native|override|protected|const|namespace|package|include|use|AS3|super|this|null|Infinity|-Infinity|NaN|undefined|true|false|is|as|instanceof|typeof|void|arguments)\b/g,
 'preprocessor': /^\s*#.*/gm,
 'number': /\b-?(0x)?\d*\.?\d+\b/g
});

C#

Prism.languages.csharp = Prism.languages.extend('clike', {
 'keyword': /\b(abstract|as|base|bool|break|byte|case|catch|char|checked|class|const|continue|decimal|default|delegate|do|double|else|enum|event|explicit|extern|false|finally|fixed|float|for|foreach|get|goto|if|implicit|in|int|interface|internal|is|lock|long|namespace|new|null|object|operator|out|override|params|private|protected|public|readonly|ref|return|sbyte|sealed|set|short|sizeof|stackalloc|static|string|struct|switch|this|throw|true|try|typeof|uint|ulong|unchecked|unsafe|ushort|using|virtual|void|while)\b/g,
 'string': /@?("|')(\\?.)*?\1/g,
 'preprocessor': /^\s*#.*/gm,
 'number': /\b-?(0x)?\d*\.?\d+\b/g
});

PHP

Prism.languages.php = Prism.languages.extend('clike', {
 'variable': /(\$[a-z_]\w+)((-(\>|>)\$?[a-z_]\w+(?!\()))?\b/ig,
 'string': /(("|')(\\?.)*?\2)|((<<<|<<<)([a-zA-Z_])[\w\W]+\4;)/g,
 'keyword': /\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|extends|private|protected|throw|exit|echo|namespace)\b/g,
 'function': /(((-(\>|>)\w+))(?=\())/g,
 'constant': /(\b[A-Z_]+\b)|(__FILE__|__DIR__|__LINE__|__METHOD__|__NAMESPACE__|__FUNCTION__|__CLASS__)\b/g,
 'number': /\b-?(0x)?\d*\.?\d+\b/g
});

Conclusion

If you are looking for a syntax highlighter, you should consider Prism. We chose it because of its small size, speed and extensibility.

We think its advantages outweigh the negatives (the biggest being no support for IE8 or less).