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.
- Open your HTML file in a text editor
- Add scripts to
headsection 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>
- Make sure to add the initiation script
- 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.
- Log into your WordPress Dashboard
- Install the Insert Headers and Footers plugin
- 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.