Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
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)
})
})