Common highlighters with the Shadow DOM

Code Highlighters with the Shadow DOM

If your website uses the Shadow DOM / Web components and you want to highlight the code source in your webpage.

The common highlighters search the <code>code tag in the javascript document because of this your shadowed <code> is not visible.


If you use highlight.js you have to call the function highlightBlock in the code that generates your shadow DOM:

let blocks = this.shadowRoot.querySelectorAll('pre code'); 
for (let i = 0; i< blocks.length; i++) { 


With prism.js you can pass the container reference:


Super fast WebApp built by Marco using SpringBoot 3 and Java 17 hosted by Infomaniak in Switzerland