在Web Component中导入使用PrismJS实现代码高亮的方法

核心原因 #

Web Component的Shadow DOM具有样式隔离特性，主文档（index.html）中引入的prism.min.css无法穿透到Shadow DOM内部，导致Prism生成的带token类名的代码元素无法应用高亮样式。另外，Prism.highlightAll()默认只会扫描主文档的DOM元素，不会遍历Shadow DOM。

解决方案 #

1. 将Prism CSS注入到Shadow DOM中

你需要把Prism的样式添加到Web Component的Shadow Root内，有两种常用方式：

方式一：添加link标签引入样式

在组件的connectedCallback或RenderView方法中，创建一个link元素并添加到Shadow DOM：

connectedCallback() {
    this.RenderView();
    // 添加Prism样式链接
    const prismStyleLink = document.createElement('link');
    prismStyleLink.rel = 'stylesheet';
    prismStyleLink.href = 'prism.min.css'; // 确保路径与index.html中的引用一致
    this.shadow.appendChild(prismStyleLink);
}

方式二：将Prism CSS嵌入到组件的样式表中

如果你的组件使用内联样式（如示例中的Style变量），可以直接把Prism的CSS内容复制到Style中，或者通过模块导入CSS字符串（需要打包工具支持，如Webpack/Vite）：

// 导入Prism CSS为字符串
import prismCSS from 'prismjs/themes/prism.min.css?raw';

// 在RenderView中合并样式
RenderView() {
    this.styleSheet.textContent = `${Style}\n${prismCSS}`;
}

2. 确保代码高亮逻辑正确

你的article()函数已经手动调用了Prism.highlight()，这部分逻辑是有效的，但需要确认：

• 已正确导入JavaScript语言支持：如果Prism.languages.javascript未定义，需额外导入语言模块：

  import Prism from 'prismjs';
  import 'prismjs/components/prism-javascript'; // 导入JS语言支持
  

• 若要使用Prism.highlightAll()，需指定Shadow DOM为扫描容器：

  // 在添加完内容到Shadow DOM后调用
  Prism.highlightAll({ container: this.shadow });
  

3. 规范元素类名设置

建议使用classList.add()来添加类名，避免直接覆盖classList属性：

_code.classList.add('language-js'); // 替代 _code.classList = 'language-js'

完整修改示例 #

修改后的article()函数：

import Prism from 'prismjs';
import 'prismjs/components/prism-javascript';

function article() {
    const code = `var data = 1`;
    const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');
    const pre = document.createElement('pre');
    const _code = document.createElement('code');
    _code.classList.add('language-js');
    _code.innerHTML = html;
    pre.appendChild(_code);
    return pre;
}

修改后的PostComponent：

export default class PostComponent extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.styleSheet = document.createElement('style');

        window.addEventListener('popstate', async (e) => {
            const path = e.state;
            const module = await GetArticle(path);

            this.articleName = module.title();
            this.canvasApp = module.canvasApp();
            this.article = module.article();

            this.shadow.replaceChildren(
                this.styleSheet,
                this.articleName,
                this.canvasApp,
                this.article
            );
            // 可选：重新高亮Shadow DOM内的代码
            Prism.highlightAll({ container: this.shadow });
        });
    }

    connectedCallback() {
        this.RenderView();
        // 注入Prism样式
        const prismStyleLink = document.createElement('link');
        prismStyleLink.rel = 'stylesheet';
        prismStyleLink.href = 'prism.min.css';
        this.shadow.appendChild(prismStyleLink);
    }

    RenderView() {
        this.styleSheet.textContent = Style;
    }
}

内容的提问来源于stack exchange，提问作者Ian