能否在同一HTML文件中同时使用Highlight.js与Prism.js测试并修改配色？

我知道这段HTML代码存在安全问题，仅用于测试把Highlight.js的CSS配色改成和Prism.js一致，不会用到正式站点里。我想在同一个HTML文件里测试这两个语法高亮库，所以给每个代码块的外层容器分别加了prismjs和highlightjs类来区分：

<div class="prismjs">
  <pre><code class="language-css">p { color: red }</code></pre>
</div>

<div class="highlightjs">
  <pre><code class="language-html">...</code></pre>
</div>

一开始我用下面的JS代码初始化两个库：

const high = document.querySelectorAll('.higlightjs');

high.forEach(el => 
{
  hljs.highlightElement(el);
});

const prism = document.querySelectorAll('.prismjs');

Prism.highlightElement(prism);

调整脚本顺序后基本能运行，但Highlight.js会把pre和code标签删掉，我得保留这些标签才行。

修正方案 #

问题出在调用Highlight.js的方法时选错了元素——hljs.highlightElement()应该作用于code标签，而不是外层的.highlightjs容器。同时Prism.js的初始化也需要调整元素选择器和执行顺序，确保能正确找到目标元素。

修正后的完整HTML代码如下：

<!DOCTYPE html>
<html lang="pt">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-dark.min.css" />
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Realces de sintaxe</title>
</head>

<body>

  <h1>Highlight.js</h1>

  <div class="highlightjs">
    <pre>
    <code class="language-markdown" aria-hidden="true">
    #### Cabeçalho nível 4 [#](#cabecalho){.anchor}
    Testando `código` em *itálico*
    </code>
  </pre>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/markdown.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      // 选中每个highlightjs容器内的code元素进行高亮
      document.querySelectorAll('.highlightjs code').forEach((el) => {
        hljs.highlightElement(el);
      });
    });
  </script>

  <h1>Prism.js</h1>

  <div class="prismjs">
    <pre class="demo__pre"><code class="demo-pre language-markdown" aria-hidden="true">
  #### Cabeçalho nível 4 [#](#cabecalho){.anchor}
  
  Testando `código` em *itálico*
  </code></pre>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-markdown.min.js"></script>
  <script>
    // 选中每个prismjs容器内的code元素进行高亮
    const prismCodes = document.querySelectorAll('.prismjs code');
    prismCodes.forEach(el => {
      Prism.highlightElement(el);
    });
  </script>

</body>

</html>

关键修正点 #

• Highlight.js部分：把选择器从.highlightjs改成.highlightjs code，让highlightElement()直接作用于code标签，这样只会对代码内容做高亮处理，不会删除原有的pre和code结构。
• Prism.js部分：把Prism的代码块移到Prism脚本之前，确保脚本执行时能找到DOM元素；同时用.prismjs code选择目标元素，调用Prism.highlightElement()（而不是Prism.highlight()，后者针对字符串而非DOM元素）完成初始化。

内容的提问来源于stack exchange，提问作者Oo'-