Question

我正在使用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，高亮度也不会突出显示任何代码，一切都只是黑色。尽管它适用于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>

感谢您的帮助。

Answer 1

使用<code class="language-markup">设置html代码的样式。

此外，您只需要使用<转义标记的开头，不要担心>个字符。最简单的方法是将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>

Answer 2

我遇到了与HTML相同的问题。我不想替换＆lt;，＆gt;使用＆amp; lt＆amp; gt所以我所做的就是把代码放在一个隐藏的div里面的textarea-elements中，一旦加载了页面，就把所有textareas的内容复制到代码元素中。通过这种方式，我能够保持代码不变，并在问题上呈现它。

当然，显而易见的缺点是没有JS就没有内容，但荧光笔再也无法工作。

Answer 3

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

语法突出显示将从扩展

中解决

<pre data-src="assets/partials/picture.html"></pre>

Answer 4

解决问题1）：

您可以使用unexcaped-markup plugin

这是它的工作原理：

<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是超文本标记语言，因此它包含在语言标记中。多数民众赞成你必须使用的东西。

Answer 5

我想补充一点，另一个非常简单的可能性是像这样使用古老的<xmp>标签：

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

Answer 6

我实际上遇到了同样的问题，即我在HTML页面上放置了棱镜js和棱镜css，但没有得到突出显示。不知道这是否会成为其他人的问题，但对我来说，是某些全局css为所有“代码”，“ pre”标签设置为黑色。我从那里删除该颜色后，棱镜高光开始显示。如果仍然无法正常工作，则可以阅读本文 Code syntax higlighter using Prism js。我看不出太大的区别，但是当我将棱镜js放在要突出显示的代码下方时，我遇到了问题。当我将其移到顶部时，它开始工作。如果有人遇到问题，可以尝试一下。

Answer 7

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

由于

Prism HTML荧光笔

7 个答案: