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

Question

prism.js 文档指出

Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code - https://prismjs.com/#features-full

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

<pre>some code</pre> - 格式正确，但没有语法高亮
<code>some code</code> - 语法高亮有效，但所有行 breaks/indentations 都被 CMS
<pre><code>some code</code></pre> - 由 CMS

<pre><code>some code</pre>

有没有办法让 prism.js 向 <pre> 标记添加语法高亮显示，如下所示：

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

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

Answer 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 标签并循环遍历每个格式:)

Answer 2

解决方案 1（原始答案）

这是我想出的代码，基于 :

<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”时也有效。

方案二（推荐）

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

我们现在在 CMS 中使用以下代码片段来自动插入代码标记缺失的地方：

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

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

Configure prism.js to recognize <pre> tags (without <code> tag)

javascript

html

syntax-highlighting

解决方案 1（原始答案）

方案二（推荐）