← flaviocopes.com

Syntax highlight any block on a Web Page

Published May 27 2022

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

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 a element 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 write books for developers 👇🏼

© 2023 Flavio Copes Flavio Copes made in Italy 🇮🇹 using Notion to Site Notion to Site