在Lit WebComponent中使用prism.js调用highlightAll报错求助

问题原因 #

官网下载的独立版Prism.js为UMD格式，无ES模块导出逻辑，默认会将自身挂载到全局window.Prism上。你用import * as prism from '../prism.js'拿到的是空模块对象，自然不存在highlightAll方法。
另外Lit开发的WebComponent默认开启Shadow DOM隔离，Prism原生的highlightAll()只会遍历主文档DOM，无法选中Shadow DOM内部的代码节点，即便引入正确也无法完成组件内代码高亮。

解决方案 #

方案1：保留手动下载的Prism文件，最小改动修复

• 调整JS引入方式，不需要用变量接收导入值，直接引入文件即可完成全局挂载：

  import '../prism.js';
  

• TS环境下在文件顶部加临时类型声明，避免类型报错：

  declare const Prism: any;
  

• 放弃调用highlightAll()，在组件firstUpdated生命周期中获取Shadow DOM内的代码块节点，单独执行高亮：

  import { LitElement, html, css } from 'lit';
  import { customElement } from 'lit/decorators.js';
  // 之前复制的Prism CSS可直接放入css模板使用
  const prismStyles = css`/* 手动复制的Prism样式内容 */`;
  
  @customElement('custom-code-block')
  export class CustomCodeBlock extends LitElement {
    static styles = [prismStyles];
  
    firstUpdated() {
      const codeNode = this.shadowRoot?.querySelector('pre code');
      if (codeNode) Prism.highlightElement(codeNode);
    }
  
    render() {
      return html`<pre><code class="language-ts">// 待高亮代码内容</code></pre>`;
    }
  }
  

方案2：通过npm管理依赖，适配Vite+TS模块化开发流程（推荐）

1. 安装核心依赖与TS类型包：

   npm install prismjs
   npm install -D @types/prismjs
   

2. 按需引入核心、语言包与主题样式，无需手动复制CSS文件内容：

   import Prism from 'prismjs';
   // 按需引入需要支持的语言，示例为TS、Bash
   import 'prismjs/components/prism-typescript';
   import 'prismjs/components/prism-bash';
   // 引入对应主题CSS，Vite会自动处理资源
   import 'prismjs/themes/prism-tomorrow.css?inline';
   

3. 高亮逻辑与方案1一致，在组件生命周期内获取Shadow DOM中的代码节点，调用Prism.highlightElement()完成高亮即可。

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