Syntax highlight any block on a Web Page
I had the need to add syntax highlighting to a page, but I didn’t have the luxury of changing the markup.
Most syntax highlighting libraries, like Prism.js, force you to use a fixed structure like this:
<pre>
<code class="language-js">
...
</code>
</pre>
Citing this:
Prism does its best to encourage good authoring practices. Therefore, it only works with
elements, since marking up code without aelement is semantically invalid.
It’s all nice and idealistic and all but I had my code in a div from an outside source. You force me that markup, but I don’t have that.
I finally found https://highlightjs.org/ that lets me apply syntax highlighting to any element I want on the page, by loading the library first and then calling:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.my-code-div').forEach((el) => {
hljs.highlightElement(el)
})
})
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025