prettify.js 没有突出显示我的代码

Question

我试图使用 prettify.js 来突出显示我的 html 代码。这是我的 html 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Making Quines Prettier</title>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=HTML" defer="defer"></script>
<style>.operative { font-weight: bold; border:1px solid yellow }</style>
</head>

<body>
<!-- Language hints can be put in XML application directive style comments. -->

<pre class="prettyprint">
<h1>Making Quines Prettier</h1>
<h1>Making Quines Prettier</h1>
</pre>

</body>
</html>

我所期待的只是显示

<h1>Making Quines Prettier</h1>
<h1>Making Quines Prettier</h1>

但它的渲染 HTML 代码和显示输出为：

让奎因斯更漂亮

Answer 1

您需要对内容进行转义，以便它们不会呈现为 html 标签

所以代码会写成

<pre class="prettyprint">
    &lt;h1&gt;Making Quines Prettier&lt;/h1&gt;
    &lt;h1&gt;Making Quines Prettier&lt;/h1&gt;
</pre>

查看示例：http://jsfiddle.net/s1ckfbsj/1/

编辑

如果你真的想写 html 并渲染它，这里有一个选项：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<pre class="prettyprint">
    <h1>Making Quines Prettier</h1>
    <h1>Making Quines Prettier</h1>
</pre>

<script>
    $(function() {
        $('.prettyprint').each(function() {
            var $self = $(this);
            var html = $self.html();
            $self.text(html);
        });
    });
</script>

在此处查看第二个示例：http://jsfiddle.net/s1ckfbsj/2/

prettify.js 没有突出显示我的代码

prettify.js not highlighting my code

html

pretty-print

让奎因斯更漂亮

让奎因斯更漂亮