配置 prism.js 以识别 <pre> 标签（没有 <code> 标签）答案

【问题标题】：Configure prism.js to recognize <pre> tags (without <code> tag)配置 prism.js 以识别 <pre> 标签（没有 <code> 标签）
【发布时间】：2021-03-27 17:35:21
【问题描述】：

prism.js 文档说明

Prism 强制您使用正确的元素来标记代码：<code>。单独用于内联代码，或在 <pre> 内用于代码块 - https://prismjs.com/#features-full

我们正在使用一个文档管理系统，它不允许在 <pre> 标记内使用任何 HTML 代码

<pre>some code</pre> - 格式正确，但没有语法高亮
<code>some code</code> - 语法高亮有效，但 CMS 删除了所有换行符/缩进
<pre><code>some code</code></pre> - 由 CMS 转换为 <pre>&lt;code&gt;some code</pre>

有没有办法让 prism.js 为 <pre> 标签添加语法高亮，像这样：

<pre class="language-javascript">
if (test) {
  someCode();
}
</pre>

也许有一个插件或 JS 配置告诉 prism.js 突出那些<pre> 标签。

【问题讨论】：

标签： javascript html syntax-highlighting

【解决方案1】：

我能够做到。这是代码，我认为你不需要language-js 我以后怎么做...

<pre class="language-js">
  var cheese = sandwich;
  function(){
    return "hello!";
  }
</pre>

首先我初始化棱镜并按照文档中的手动突出显示：

<script>
  window.Prism = window.Prism || {};
  window.Prism.manual = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

现在默认情况下什么都不会发生。在文档的下方，他们在 Usage with Node

下展示了一个示例

// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

所以在我的示例中，我执行以下操作：

<script>
  // Get the pre element
  let pre = document.querySelector("pre");
  // Grab the text out of it
  let code = pre.innerText;
  // Highlight it
  let highlighted = Prism.highlight(code, Prism.languages.javascript, 'javascript');
  // Now put that back in, but as HTML
  pre.innerHTML = highlighted
</script>

这里的例子：

https://codepen.io/EightArmsHQ/pen/f9023daaa6499786e25899cb62f4d6c2?editors=1010

我相信您可以弄清楚如何 querySelectorAll 和 pre 标记并遍历每个格式：)

【讨论】：

谢谢！正是我想要的。我查看了此答案中解释的 Prism 方法的文档，并找到了一种简单而干净的方法来解决问题

【解决方案2】：

解决方案 1（原始答案）

这是我根据the reply by Djave 提出的代码：

<script>
  // Enable the "manual" mode to prevent prism from instantly firing.
  window.Prism = window.Prism || {};
  window.Prism.manual = true;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" defer></script>

<script>
  // Use the hook "before-highlightall" to register the custom CSS selectors:
  Prism.hooks.add('before-highlightall', function (env) {
    env.selector += ', pre[class*="language-"], pre[class*="lang-"]';
  });

  // Highlight code, when the page finished loading (using jQuery here)
  jQuery(Prism.highlightAll);
</script>

注意事项：

也许代码可以写得更短（我不确定第一个块是否真的需要）。但是，此解决方案似乎非常可靠，并且在我们所有的文档上都可以稳定运行。
在我的测试中，当使用 defer 或 async 标志加载“prism.min.js”时，该代码也可以工作。

解决方案 2（推荐）

我发现，缺少的代码标记与 prism.js 插件有一些其他（小）问题，例如行号插件。

我们现在在 CMS 中使用以下 sn-p 来自动插入缺少的代码标签：

<script>
  // Enable the "manual" mode to prevent prism from instantly firing.
  window.Prism = window.Prism || {};
  window.Prism.manual = true;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" defer></script>

<script>
  // THE FOLLOWING BLOCK CHANGED:

  jQuery(function() {
    // Wrap the code inside the required <code> tag, when needed:
    jQuery('pre[class*="language-"], pre[class*="lang-"]').each(function() {
      if (1 !== jQuery(this).children('code').length) {
        jQuery(this).wrapInner('<code>');
      }
    });

    // Highlight code, when the page finished loading (using jQuery here)
    Prism.highlightAll()
  });
</script>

【讨论】：