如何放置我的 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。
哦，我想我明白这个问题了。您需要对<code>元素内的 HTML 进行转义，否则它将被解释为 HTML 而不是文本（您希望 HTML 按字面意思显示，而不是解释为网页结构的一部分）。
更改每个<to<和>to >，以及代码示例中的任何其他特殊 HTML 字符。（如果您正在动态生成页面，大多数语言都有一个实用函数来为您转义 HTML。）
没有 jQuery 的 user2932428 解决方案：
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
如果您有大量代码要突出显示并且不想手动转义所有内容，则一种选择是使用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必须完全左对齐。
你必须逃避内容<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();