23

我正在使用Prism，它在 CSS 上运行良好：

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

但我不能让它为 html 工作：

<pre><code class="language-html"><p class="red">red text</p></code></pre>

我有两个问题：

  1. <并>表示为标签，而不是文本，但我可以将其替换为&lt;and&gt;

  2. 更重要的是，即使如问题 1 所示更换，highliter 也不会突出显示任何代码，一切都只是黑色。尽管它适用于 CSS，但整个代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-css">p { color: red }</code></pre>
    </body>
</html>

谢谢你的帮助。

4

7 回答 7

51

用于<code class="language-markup">样式化 html 代码。

此外，您只需用 转义标签的开头&lt;，不用担心&gt;字符。最简单的方法是将您的 html 代码粘贴到 pre 标记中，然后对所有<字符执行查找和替换。

这应该有效：

<!DOCTYPE html>
<html>
    <head>
        <link href="prism.css" rel="stylesheet" />
    </head>
    <body>
        <script src="prism.js"></script>
        <pre><code class="language-markup">
            &lt;p class="red">red text &lt;/p>
        </code></pre>
    </body>
</html>
于 2013-03-25T03:32:41.360 回答
4

解决问题 1)：

您可以使用unexcaped-markup 插件

这是它的工作原理：

<script type="text/plain" class="language-markup">
   <p>Example</p>
</script>

要忽略第一个和最后一个返回，我建议使用normalize whitespace plugin。

解决问题2）：

没有languages-html看到http://prismjs.com/index.html#languages-list。HTML 是一种超文本标记语言，因此它包含在language-markup中。这就是你必须使用的。

于 2018-01-09T21:54:28.950 回答
2

我对 HTML 也有同样的问题。我不想用 < > 替换 <, > 所以我所做的是将代码放在隐藏 div 内的 textarea-elements 中，一旦加载页面，将所有 textarea 的内容复制到代码元素。通过这种方式，我能够保持代码原样并毫无问题地渲染它。

当然，明显的缺点是没有 JS 就没有内容，但是荧光笔也不起作用。

于 2016-03-24T13:16:29.930 回答
2

我想补充一点，另一个非常简单的可能性是<xmp>像这样使用archaic -tag：

<pre><code class="language-html">
<xmp>
  <p>this markup is now rendered as expected although your IDE might be upset about you using that old tag</p>
</xmp>
</code></pre>
于 2020-11-27T07:45:53.993 回答
1

最好的解决方案是将要突出显示的 html 保存到单独的文件中。您需要将文件高亮插件包含在您的 js.js 中。

语法高亮将从扩展中解决

<pre data-src="assets/partials/picture.html"></pre>
于 2016-07-28T11:10:56.557 回答
0

我实际上遇到了同样的问题，我将 prism js 和 prism css 放在 html 页面上，但无法突出显示。不确定这是否会是其他人的问题，但对我来说，是一些全局 CSS 被设置为所有“代码”、“预”标签的黑色。在我从那里删除该颜色后，棱镜突出显示开始显示。如果它仍然不起作用，您可以按照这篇文章 Code syntax higlighter using Prism js 进行操作。我看不出有什么不同，但是当我将 prism js 放在我想要突出显示的代码下方时遇到了问题。当我将其移至顶部时，它开始工作。如果有人有问题，他们可以试试这个。

于 2020-12-12T12:58:16.537 回答
0

我认为亚当的答案应该是这种情况下的最佳解决方案。我只是详细说明了使用unexcaped-markup 插件以最简单的方式制作 HTML 荧光笔。

由于 <script /> 仅适用于单行代码，因此您可能需要插入简单的 HTML 注释来转义所有代码：

<pre class="language-markup"><code><!--
  <p>Example</p>
  <p>Example</p>
  <p>Example</p>
--></code></pre>

评论中的所有内容都会被漂亮地打印出来。如果您需要使用Prism打印 HTML 标记，值得一试。

于 2021-07-21T04:56:42.100 回答