Extending and customizing Prism syntax highlighter

I have finally found the syntax highlighter I was looking for. Prism is a light weight Javascript + css syntax highlighter written by Lea Verou. A syntax highlighter is a program that will help you make any bits of code you want to publish on your website look prettier.

Other than it really being very light weight and easy to install, another thing I love about Prism is that the code is easy to extend or modify according to your needs. Here is an example of how to make Prism highlight an additional element not included in the default download.

Tokens that are used to create css classes are constructed in prism.js. Now if we want to add highlighting of php style variables when applying the “javascript” language, all we have to do is add a line in the javascript language definitions in prism.js. The line we are adding is 'phpvars': /$.*/ and what it does is construct a new token css called “phpvars” which matches any word that starts with dollar sign.

 Prism.languages.javascript = Prism.languages.extend('clike', { 'keyword': /b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)b/g, 'number': /b(-?(0x)?d*.?[da-f]+|NaN|-?Infinity)b/g, 'phpvars': /$.*/, }); 

Then we have to style our new class! In prism.css add the following class

 .token.phpvars { color: blue; } 

That’s it! Now any php code we put within pre or code tags with the language “javascript” declared in the tags class will highlight php style variables. So this

 if (false !== strpos($allowedTags, 'comment')) { $escapedContent = preg_replace_callback('|<!--.*?-->|is', 'tguy_cmu_unescape_tag', $escapedContent); } 

Will now look like this

 if (false !== strpos($allowedTags, 'comment')) { $escapedContent = preg_replace_callback('|<!--.*?-->|is', 'tguy_cmu_unescape_tag', $escapedContent); } 

The only tricky part of this is that you need to have some clue about how regular expressions work to be able to select exactly the piece of code that you want to highlight. There are plenty of resources and tutorials online to help you along the way and be sure to check out http://stackoverflow.com which has answers to many common programmer dilemmas.

If you are happy with the default classes that Prism constructs, you can always play around with the css file, modify the colors and add other styling as you wish.