Prism HTML荧光笔 [英] Prism HTML highlighter

查看:199
本文介绍了Prism HTML荧光笔的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 Prism 及其在CSS上运作良好:

I'm using Prism and its working well for CSS:

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

但我不能让它适用于html:

but i can't get it working for html:

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

我有2个问题:


  1. < > 表示为标签,而不是文字,但是我可以用& lt; & gt;

  1. < and > are represented as tags, not as text, but i could replace it by &lt; and &gt;

更重要的是,即使更换问题1,高亮度也不会突出显示任何代码,一切都只是黑色。尽管它适用于CSS,但整个代码如下所示:

More important, even replaced as shown in problem 1, the highliter will not highlight any code and everything is just black. Despite that it is working for CSS, whole code looks like this:




<!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代码的样式。

Use <code class="language-markup"> to style html code.

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

Also, you only need to escape the beginning of the tags with &lt;, don't worry about the &gt; characters. The easiest way is to paste your html code into the pre tag, then perform a find and replace for all < characters.

这应该有效:

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

这篇关于Prism HTML荧光笔的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆