highlight.js is a syntax highlighting with language autodetection. The idea is similar to Google Code Prettify.This tutorial will show you how-to add highlight.js to your HTML5 website. I’ll provide code for both self-hosting and CDN hosted. You can download hihglihgt.js or read more on highlightjs.org.

Example:

See the Pen highlight.js Example by Brandon Himpfen (@brandonhimpfen) on CodePen.

CSS

Add one of the following CSS codes to your website depending upon if you want to self-host and use hosted CDN:

Self-hosted:

<link rel="stylesheet" href="/path/to/default.css">

Hosted:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css">

JavaScript

Next add one of the following JavaScript codes to your website:

Self-hosted:

<script src="/path/to/highlight.min.js"></script>

Hosted:

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>

After you added the CSS and JavaScript codes, you’ll need to add the following below the JavaScript code:

<script>hljs.initHighlightingOnLoad();</script>

Using highlight.js

Now to use highlight.js, add code between

<

pre> and

.

highlight.js should automatically detect the language, if not we can specify the language using the class attribute:

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

Where html is the language. You can see the list of supported language on highlight.js’s docs.

If there is a piece of code that you don’t want highlight.js to be used on, add the class attribute with a value of nohighlight:

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

Have fun!