小贝子编程

语法突出显示 - 棱镜 HTML 突出显示器



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

我有 2 个问题：

  1. <和>表示为标签，而不是文本，但我可以用&lt;和&gt;替换它

  2. 更重要的是，即使如问题 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>

感谢您的任何帮助。

使用 <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>
我想

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

要解决问题 1）：

您可以使用未扩展标记插件

这是它的工作原理：

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

要忽略第一个和最后一个返回，我建议使用规范化空格插件。

要解决问题 2）：

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

我在HTML上遇到了同样的问题。我不想用 <> 替换<，>所以我所做的是将代码放在隐藏div 内的 textarea-elements 中，一旦页面加载，将所有文本区域的内容复制到代码元素。这样，我能够保持代码原样并渲染它而不会出现任何问题。

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

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

语法突出显示将从扩展中解决

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

我实际上遇到了同样的问题，我将 prism js 和 prism css 放在 html 页面上，但无法突出显示。不确定这是否会是其他人的问题，但对我来说，它是一些全局 css，它为所有"代码"、"pre"标签设置为黑色。在我从那里删除该颜色后，棱镜突出显示开始显示。如果仍然不起作用，您可以按照本文进行操作使用 Prism js 编写语法 higlighter。我看不到太大的区别，但是当我将prism js放在我要突出显示的代码下方时，我遇到了问题。当我把它移到顶部时，它开始工作。如果有人有问题，他们可以尝试这个。

我认为在这种情况下，亚当的回答应该是最好的解决方案。我只是详细说明了未覆盖标记插件的使用，以最简单的方式使HTML突出显示器。

由于