让Quines更漂亮

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代码并将输出显示为：

让Quines更漂亮

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没有突出显示我的代码

让Quines更漂亮

让Quines更漂亮

1 个答案: