Syntax highlighting is one of the first problems developers and technical writers will encounter once they start publishing content with code snippets or extracts on the web. While this is not a crisis by any means, having your code excerpts highlighted does make them standout and is more aesthetically pleasing.
Here I present a quick and simple solution powered by javascript to solve this problem. It is lightweight and can be embedded in the frontend of whichever content management platform you chose to utilize be it Wordpress, Drupal, Ghost, etc.
highlightjs
highlightjs is the library that will be featured in this article. Known for the accuracy of its parser and the bredth of languages supported it is our chosen solution to power our code colouring in this example.
A few other popular competing choices for syntax highlighting on the frontend are Google's Code Prettify and Prismjs. For a more detailed rundown of the Pros and Cons of various highlighters take a look at Ivan Sagalaev's (somewhat biased) comparison on the Software Mechnanics Blog.
Basic steps to deploy highlightjs
-
Download the latest version at http://highlightjs.org/download
-
Extract the archive to a subdirectory of the theme that powers the site.
-
Customize the stylesheets in the styles sub directory of highlightjs.
- Creating a custom style is an optional step and can be skipped if you are fine with using the preset templates available in the highlightjs/styles sub directory.
-
Edit the
<head>section of the CMS's html template files or the current themes html template to include the CSS stylesheet that will be used by highlightjs. You should have a line similar to the following in your HTML head section.-
Replace {{asset "path/to/highlighter/styles/chosen-preset.css"}} with the pathname relative to your deployment.
<link rel="stylesheet" type="text/css" href="{{asset "path/to/highlighter/styles/chosen-preset.css"}}" />
-
-
Include the highlighjs script in your HTML
<body>section.-
Replace {{asset "/path/to/highlighter/highlight.pack.js"}} with the pathname relative to your deployment.
<script type="text/javascript" src="{{asset "/path/to/highlighter/highlight.pack.js"}}"></script>
-
-
Add a
<script>element in the<body>to execute the highlighting automatically or selectively for a code block. Automatic highlighting on page load cause highlightjs to scan every<pre>and<code>element. It will apply styles based on language hints embedded in the class attribute or via its internal prediction algorithm.
To run on page load insert below in <body>.
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
Or to selectively execute only for specific code blocks insert a <script> similar to the below example which does it for every div.code class.
hljs.configure({useBR: true});
$('div.code').each(function(i, e) {hljs.highlightBlock(e)});
That's it!
Now go download highlightjs, update your theme and template files, clear your server cache and refresh your browser.
Voila! Your code is now in colour. Enjoy.
Further Reading
Written by
Nneko Branche.