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 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook