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 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)
  })
})

Written on May 27, 2022

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

C Handbook
Command Line Handbook
CSS Handbook
Express Handbook
Git Cheat Sheet
Go Handbook
HTML Handbook
JS Handbook
Laravel Handbook
Next.js Handbook
Node.js Handbook
PHP Handbook
Python Handbook
React Handbook
SQL Handbook
Svelte Handbook
Swift Handbook

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