15

Common highlighters with the Shadow DOM

 3 years ago
source link: https://marco.dev/highlighters-shadow-dom
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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);

Author

Marco Molteni

Marco Molteni Blog


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK