棱镜HTML语法高亮器

Question

棱镜HTML语法高亮器

24

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

谢谢任何帮助。

- kajacx

7个回答

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>

- oehmaddin

4

解决问题1）：

您可以使用未转义标记插件

它的工作原理如下：

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

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

解决问题2）：

不存在languages-html，请参见http://prismjs.com/index.html#languages-list。HTML是一种超文本标记语言，因此包含在language-markup中。这就是你需要使用的。

- Adam

2

我也遇到了HTML的同样问题。我不想用&lt和&gt替换<和>，所以我将代码放在textarea元素内部的隐藏div中，一旦页面加载完成，就将所有textarea的内容复制到code元素中。这样，我就能保持代码原样，并且可以渲染它而不会出错。

当然，明显的缺点是如果没有JS就没有内容，但反过来，高亮器也不会起作用。

- Hardev

3

您不需要用<和&rt;来替换<和>。只需将您的HTML代码包装在<script type="prism-html-markup"></script>中即可。请参见https://dev59.com/s2Ml5IYBdhLWcg3wcmvD#27495949。 - kimbaudi

1

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

语法高亮将从扩展名中确定。

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

- steve

0

我曾经遇到过同样的问题，我在HTML页面上放置了prism js和prism css，但无法进行高亮显示。不确定其他人是否也会遇到这个问题，但对我来说，问题出在全局CSS上，将所有“code”、“pre”标签设置为黑色。当我从那里删除了该颜色后，prism高亮显示开始显示。如果仍然无法正常工作，则可以参考此文章使用Prism js进行代码语法高亮。我没有看到太大的区别，但当我将prism js放在要突出显示的代码下面时，我遇到了问题。当我将其移到顶部时，它开始工作。如果有人遇到问题，他们可以尝试这个方法。

- Shubham

0

我认为Adam的答案应该是这种情况下最好的解决方案。我只是更详细地阐述了使用未转义标记插件来以最简单的方式制作HTML高亮器。

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

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

注释中的所有内容都将以漂亮的方式打印出来。如果您需要使用Prism打印HTML标记，那么这是值得一试的。

- lewishole

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan Jones · Accepted Answer

使用 <code class="language-markup"> 来为HTML代码添加样式。

此外，您只需要用<转义标签的开头，不必担心>字符。最简单的方法是将HTML代码粘贴到

标签中，然后查找并替换所有<字符。

应该可以这样做：
<!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>