How To Add highlight.js To Your Website

It’s easy to use the highlight.js library to improve code snippets on your website.

Basically, highlight.js lets you easily provide high-quality syntax highlighting without requiring a lot of effort on your part.

We’re going to show you how to include the code library on any page, and how you can do it in WordPress.

How To Add highlight.js Scripts With HTML

You can easily add the necessary scripts to any HTML page for which you have edit access.

1. Open your HTML file in a text editor
2. Add scripts to head section using the provided CDN links:

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

3. Make sure to add the initiation script

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

4. Save your file

Now, highlight.js will be able to automatically highlight your various code snippets, but should it fail, you can use a class attribute:

<pre><code class="html"><meta author="Joe Example"></code></pre>

How To Add highlight.js Scripts to Your WordPress Site

It’s also very easy to add the highlight.js scripts to your WordPress site.

You’ll basically need to add the scripts to your site’s header. If you’re unfamiliar with editing site code for your WordPress theme files, you can use a plugin.

We’ll be going the plugin route for this example.

1. Log into your WordPress Dashboard
2. Install the Insert Headers and Footers plugin
3. From inside the plugin, add the above scripts to your header

Well done! You now know how to add the highlight.js library to your HTML and WordPress sites. Be sure to leave a comment or question if you have any further difficulties.