配置 prism.js 以识别没有 <code> 标签的 <pre> 标签。

Question

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>标签。

- Philipp

Answer 1

我做到了。这里是代码，我认为你不需要language-js 如何后续做...

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

首先我初始化prism并按照文档中的手动高亮步骤进行：

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

现在默认情况下什么都不会发生。文档中更深入的部分，在与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标签，并循环遍历每一个并进行格式化 : )

- Djave

---

谢谢！这正是我需要的。我查阅了 Prism 方法的文档，解释了这个答案中的方法，并找到了一个简单而干净的解决问题的方法。 - Philipp

Answer 2

解决方案1（原始答案）

这是我基于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 (推荐)

我发现，缺少 code 标签会导致 prism.js 插件（如行号插件）出现其他（较小的）问题。

我们现在在我们的 CMS 中使用以下片段来自动插入缺失的 code 标签：

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

- Philipp