14

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

4

4 回答 4

28

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

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

于 2014-02-27T17:53:16.737 回答
11

没有 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;");
});
于 2017-07-24T16:09:05.343 回答
3

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

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

然后，只需echo在您的<pre><code>...</code></pre>街区内进行操作即可。

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

例子：

<?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必须完全左对齐。

于 2015-05-27T17:03:32.773 回答
2

你必须逃避内容<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();
于 2017-07-12T08:47:24.880 回答