Syntax highlight any block on a Web Page
React Masterclass
Launching on November 4th
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 20 books to help you become a better developer:
- JavaScript Handbook
- TypeScript Handbook
- CSS Handbook
- Node.js Handbook
- Astro Handbook
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux/Mac CLI Commands Handbook
- C Handbook