【问题标题】：highlightjs with html code带有html代码的highlightjs
【发布时间】：2014-02-27 17:41:26
【问题描述】：

如何放置 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。

【问题讨论】：

您是否包含了其中一个样式表？而且，想想，highlightjs JS 本身？ HLJS 也可能无法确定语言是什么——尝试在初始化行之前使用hljs.configure({ 'languages': ['html'] }); 手动设置它。

标签： javascript html syntax-highlighting prettify

【解决方案1】：

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

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

【讨论】：

只是在 Windows 中使用记事本解决了我这个问题

【解决方案2】：

没有jQuery的user2932428解决方案：

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;");
});

【讨论】：

谢谢！这为我节省了很多时间。
这很好。但是，不适用于 <html>....</html> <body>...</body> <head>...</head> 等标签。任何可用的修复？谢谢。
免责声明：我是 Highlight.js 的当前维护者。这只是要求 HTML 或 JS 注入式攻击安全问题。请不要这样做。代码需要在服务器上转义 - 在它到达客户端之前，而不是之后。
@JoshGoebel 我个人使用这行代码替换了我自己在 标签内的 HTML 文件中编写的代码，因此数据不是来自数据库或任何其他外部来源。但你是对的，永远不要在客户端转义你的代码（如果你没有自己编写那个代码）。

【解决方案3】：

要添加到@Cameron 对转义 html 的回答：

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

那么只需在您的<pre><code>...</code></pre> 块中echoing 即可。

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

示例：

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

使用 heredoc 需要注意的一点是，您的结束 EOT 必须完全左对齐。

【讨论】：

【解决方案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>....</html> <body>...</body> <head>...</head> 等标签。有什么可用的修复吗？谢谢。