Code highlighting the easy way

Aug 07, 2018 Tips N Tricks, UI Fixes
Facebook Twitter Linkedin Mail

So after relaunching this site using Umbraco and the default Bootstrap 4 theme (blog) i realised there was no <code> highlighting included in bootstrap.

After some quick Googling i came across a very useful JavaScript library called highlight.js this library is able to auto match up to 176 languages and colour code them accordingly.

This seemed pretty nifty and much easier than codiing a ton of css myself.

To implement this you just need to add 3 very small lines into the <head> if the site:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Then wrap your code with the following:

<pre><code>...</code></pre>

If the auto highlighting doesn't work or you would like to use a different style you can manually set it like so:

<pre><code class="html">...</code></pre>

Or if you would like to disable code highlighting altogether:

<pre><code class="nohighlight">...</code></pre>

This is just a real basic implementation of this JavaScript library, take a look over on the project website to see about custom initialization, downloading the library and creating a custom library.

 

Comments (0)