New project now live ST220 ENTHUSIASTS

I have just pushed my latest project live for the group ST220 ENTHUSIASTS.

It is a mobile friendly Umbraco CMS based website, the front end has been written using Bootstrap, jQuery, Now UI, AJAX and the Razor template engine.

The underlying code is the Umbraco CMS system which runs on Dot Net Framework 4.7 (C#).

Some of the code i used in the site has come from a really useful resource codeshare.co.uk

The site can be found here: https://st220enthusiasts.com

Code highlighting the easy way

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.