How-to Add highlight.js To Your Website

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


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="//">


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





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!