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:


Fullstack Angular / Java application quick start guide.
WebApp built by Marco using SpringBoot 3.2.4 and Java 21. Hosted in Switzerland (GE8).