Screenshot of the On-the-fly syntax highlighting of [contenteditable] code snippets demo with DevTools open. Thanks to Prism’s Tokenizer and the Custom Highlight API, the code is highlighted without the need for a bunch of <span> elements wrapped around each token. ~ The way syntax highlighters on the web typically work is a to wrap all tokens in <span> elements with a proper class and use CSS to
![Syntax Highlighting code snippets with Prism and the Custom Highlight API](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c3017c31ecd0b32ad56ea6f8fc692d7f3326058/height=288;version=1;width=512/https%3A%2F%2Fwww.bram.us%2Fwordpress%2Fwp-content%2Fuploads%2F2024%2F02%2Fcustom-highlights-cover.png)