配置prism.js以识别<pre>标记(没有<code>标记)

Question

prism.js文档声明

棱镜迫使您使用正确的元素来标记代码：<code>。用于内联代码，或在<pre>中用于代码块- 。

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

• <pre>some code</pre> -格式是正确的，但语法highlighing
• <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>标记。

Answer 1

解决方案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中使用以下代码片段自动插入代码标记(代码标记丢失的地方)：

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

Answer 2

我做到了。这是代码，我想你不需要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>

现在，默认情况下什么都不会发生。在接下来的文档中，它们展示了一个使用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标记并循环遍历它们的格式：)