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.

highlight.js

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++) { 
                            hljs.highlightBlock(blocks[i]); 

prism.js

With prism.js you can pass the container reference:

Prism.highlightAllUnder(this.shadowRoot);