highlight.js使用异常：HTML meta标签消失问题求助

问题根源 #

你的代码存在嵌套代码块结构错误，且未正确处理HTML代码的转义：

• 你把<pre><code class="language-html">连同内部的meta标签一起嵌套在另一个<code>标签中，浏览器会将代码里的<meta>解析为真实的页面DOM元素，而非待高亮的代码文本，导致这些meta标签被浏览器“消耗”，无法作为代码显示。
• 调用hljs.highlightAll()的时机可能过早，DOM尚未完全加载完成，highlight.js无法正确识别目标代码块。

修正方案 #

1. 调整代码块结构，正确转义HTML代码 #

将待高亮的HTML代码放在独立的<pre><code class="language-html">容器中，同时把代码里的<转义为<，>转义为>，避免浏览器将其解析为真实页面标签：

<!-- 先引入highlight.js的样式文件和核心脚本 -->
<link rel="stylesheet" href="[highlight.js样式文件路径]">
<script src="[highlight.js核心脚本路径]"></script>

<!-- 待高亮的HTML代码块 -->
<pre><code class="language-html">
&lt;!-- android - 修改标题栏和地址栏颜色 --&gt;
&lt;!-- mobile_header_color --&gt;
&lt;!-- mobile_header_color START--&gt;
&lt;meta name="theme-color" content="#4285f4"&gt;
&lt;!-- 蓝色 --&gt;
&lt;meta name="theme-color" content="#4285f4"&gt;
&lt;!-- Windows Phone --&gt;
&lt;meta name="msapplication-navbutton-color" content="#4285f4"&gt;
&lt;!-- iOS Safari --&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="#4285f4"&gt;
&lt;!-- Windows Phone --&gt;
&lt;meta name="msapplication-navbutton-color" content="#4285f4"&gt;
&lt;!-- iOS Safari --&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&gt;
</code></pre>

<!-- 在DOM加载完成后调用高亮方法 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  hljs.highlightAll();
});
</script>

2. 禁止嵌套代码块 #

不要将<pre><code>结构嵌套在另一个<code>或<pre>标签内，保持代码块的独立性，highlight.js仅会识别带有language-*类名的<code>标签作为高亮目标。

3. 确保高亮方法调用时机正确 #

必须在DOM完全加载完成后执行hljs.highlightAll()，否则highlight.js无法找到目标元素。除了使用DOMContentLoaded事件监听，也可以将调用脚本放在页面底部（</body>标签前），利用HTML的加载顺序确保DOM已就绪。

内容的提问来源于stack exchange，提问作者Pycm