使用prism.js突出显示html

时间:2014-04-23 12:05:01

标签: javascript prism.js

我似乎无法使用prism.js突出显示html,因为它删除了仅打印文本的标记。 " pre"中的以下代码标签显示为文本。我有#34;代码"标签设置为"语言标记"。

    <table class="data-table">
        <tr>
            <td>Title</td>
            <td>Amount</td>
        </tr>
        <tr>
            <td>Shorts</td>
            <td>£1.00</td>
        </tr>   
        <tr>
            <td>Shorts</td>
            <td>£1.00</td>
        </tr>           
    </table>

显示为

            Title
            Amount


            Shorts
            £1.00


            Shorts
            £1.00

2 个答案:

答案 0 :(得分:3)

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

这应该有效:

&lt;table class="data-table">
    &lt;tr>
        &lt;td>Title&lt;/td>
        &lt;td>Amount&lt;/td>
    &lt;/tr>
    &lt;tr>
        &lt;td>Shorts&lt;/td>
        &lt;td>£1.00&lt;/td>
    &lt;/tr>   
    &lt;tr>
        &lt;td>Shorts&lt;/td>
        &lt;td>£1.00&lt;/td>
    &lt;/tr>           
&lt;/table>

答案 1 :(得分:3)

另外,您可以使用<script type="prism-html-markup"> your code </script>

包装代码