Prism HTML荧光笔

Question

Prism HTML荧光笔

kaj*_*acx 17 html5 syntax-highlighting prism.js

我正在使用Prism,它对CSS 很有用:

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

Run Code Online (Sandbox Code Playgroud)

但我无法让它适用于html:

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

Run Code Online (Sandbox Code Playgroud)

我有两个问题:

<并>表示为标签,而不是文本,但我可以用<和替换它>
更重要的是,即使更换问题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>

Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助.

Answer 1

小智 41

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

Run Code Online (Sandbox Code Playgroud)

处理 HTML 语法的另一种方法是将您的 HTML 代码包装在 `<script type="prism-html-markup"></script>` 中，如下所示：http://stackoverflow.com/a/27495949/1097123。我认为它比用 `<` 替换 `<` 好多了 (2认同)

Answer 2

oeh*_*din 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	17607 次
最近记录：	8 年前