Prism.js为何将语言类插入外层<pre>标签以修改DOM？

这是Prism的默认行为哦！它会自动把<code>标签上的language-*类同步到其父级的<pre>标签上，目的是方便主题样式针对整个代码块（而不只是内部的<code>）做统一设置——比如很多高亮主题会依赖<pre.language-*>来定义代码块的背景、内边距、字体等整体样式。

如果你的场景不需要这个行为，或者想自定义<pre>的类，可以通过Prism的**钩子（hooks）**来修改这个逻辑，示例代码如下：

// 拦截Prism的wrap钩子，修改<pre>的类
Prism.hooks.add('wrap', function(env) {
  const preElement = env.element.parentNode;
  // 确认父元素是<pre>
  if (preElement.tagName === 'PRE') {
    // 移除Prism自动添加的language类
    preElement.classList.remove(env.language);
    // 可选：添加你自己需要的自定义类
    // preElement.classList.add('your-custom-language-class');
  }
});

把这段代码放在Prism加载完成后执行，就能阻止Prism给<pre>自动添加和<code>相同的language类了。

另外，如果只是想让<pre>保留自己原本的类，同时不被Prism添加的类覆盖，也可以在钩子中调整逻辑——比如先移除自动添加的类，再添加上你需要的类即可。

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