用html代码突出显示

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按字面显示,而不是解释为网页结构的一部分).

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

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