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.

CM
Christopher Maiorana Content Marketing Writer

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Thoughts on “How To Add highlight.js To Your Website

  • Hello. I also don’t see the result of “highlight”.

    Here’s what I did. I added this to head using the clearfy plugin:

    hljs.initHighlightingOnLoad();

    However, this does not work. Also, I tried to register scripts in functions.php. But there is no result.

    Any ideas? Thanks!

    • Sorry to hear that you’re running into trouble. Did you use the method involving adding the HTML directly, or the plugin. If so, what errors are you running into?

Was this article helpful? Let us know!