Prism HTML 荧光笔答案

【问题标题】：Prism HTML highlighterPrism HTML 荧光笔
【发布时间】：2013-01-28 09:54:55
【问题描述】：

我正在使用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>

我有两个问题：

&lt; 和 &gt; 表示为标签，而不是文本，但我可以将其替换为 &lt; 和 &gt;
更重要的是，即使如问题 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>

感谢您的帮助。

【问题讨论】：

标签： html syntax-highlighting prism.js

【解决方案1】：

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

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

这应该可行：

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

【讨论】：

哦，伙计，所有这些 html 实体都造成了一些丑陋的源代码......有人知道为什么 Prismjs 会不遗余力地删除 html 标签吗？是不是可以设置为真或假的选项...
nm，在 Github 上看到 this 对话...不是 Prism 的事情，而是由于
```
 标签...
```

据我了解

 标签支持嵌入的 html 标签。怎么不是棱镜问题？

或者你可以把你想要高亮的代码放在一个文件中，然后让prism加载并从文件中高亮它并注入到页面中。
另一种处理 HTML 语法的方法是将 HTML 代码包装在 <script type="prism-html-markup"></script> 中，如下所示：stackoverflow.com/a/27495949/1097123。我认为这比用&lt;替换&lt;要好得多

【解决方案2】：

解决问题 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 是一种超文本标记语言，因此它包含在 language-markup 中。这就是你必须使用的。

【讨论】：

【解决方案3】：

我想补充一点，另一个非常简单的可能性是像这样使用古老的<xmp>-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>

【讨论】：

【解决方案4】：

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

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

【讨论】：

您不必将&lt; 和> 替换为&lt; 和&rt;。只需将您的 html 代码包装在 <script type="prism-html-markup"></script> 中即可。看看stackoverflow.com/a/27495949/1097123

【解决方案5】：

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

语法高亮将从扩展中解决

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

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

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

【讨论】：