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.


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


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


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


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


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


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


<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:


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!