实施例

Question

如何设置我的HTML代码以使highlight.js美化它？

我试过

<pre>
    <code>
        <!-- HTML Prettify -->
        <div>
            <pre class="pre-code-ception"><code> haha </code></pre>
        </div>
    </code>
</pre>

我确实放在我文件的末尾：

<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

但是所有内容都显示为纯HTML。

Answer 1

哦，我想我明白了这个问题。您需要在<code>元素中转义HTML，否则它将被解释为HTML而不是文本（您希望HTML按字面显示，而不是解释为网页结构的一部分）。

将每个<更改为<和>更改为>，以及代码示例中的任何其他特殊HTML字符。（如果您正在动态生成页面，大多数语言都有一个实用程序函数来为您转义HTML。）

Answer 2

user2932428没有jQuery的解决方案：

document.querySelectorAll("code").forEach(function(element) {
    element.innerHTML = element.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});

Answer 3

要添加@ Cameron关于转义html的答案：

如果您要突出显示大量代码并且不想手动转义所有内容，则可以选择使用heredoc语法将其保存为变量，并使用{{{{ 1}}（PHP）来逃避它。 Heredoc允许您将多行字符串保存为变量，而无需使用连接运算符。

然后，只需htmlspecialchars()阻止echo阻止它。

使用此方法的好处是代码在文档中仍然可读。

实施例

<pre><code>...</code></pre>

关于使用heredoc需要注意的一点是，您的结束<?php $code = <<< EOT <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="image.png" /> </body> </html> EOT; ?> <pre> <code class="html"> <?php echo htmlspecialchars( $code ); ?> </code> </pre>必须完全左对齐。

Answer 4

你必须逃避<code class="html">

中的内容

$('code').each(function() {
  var that = $(this);
  // cache the content of 'code'
  var html = that.html().trim();
  that.empty();
  // escape the content
  that.text(html);
});
hljs.initHighlightingOnLoad();

用html代码突出显示

4 个答案:

要添加@ Cameron关于转义html的答案：

实施例