必须用<pre><code>嵌套结构，因<code>单独使用会压缩换行与空格，<pre>单独存在则无语义且高亮库（如highlight.js、Prism.js）仅扫描该嵌套节点；class须为language-xxx格式，代码中<、>、&需转义，CSS需设置font-family、tab-size、white-space、overflow-x，JS须在DOM就绪后调用高亮函数。
必须用 <pre class="brush:php;toolbar:false;"> 嵌套结构，不能只用 <pre class="brush:php;toolbar:false;"> 或只用 <code></H3>
<p>单独 <code> 会压缩换行和多余空格，<pre class="brush:php;toolbar:false;"> 单独存在则不带语义、高亮库不识别。浏览器和 highlight.js / Prism.js 都只扫描 <pre class="brush:php;toolbar:false;"><code> 这种嵌套节点。</p>
<p>常见错误写法：<code><p><code class="js">const x = 1;</code></p>
（跳过高亮）、<div><code>...</code></div>（无格式保留）。
- 正确结构示例：
<pre><code class="js">function foo() { return true; }</code></pre>
-
class 必须含 language- 前缀（如 language-python），highlight.js 严格依赖这个命名；Prism.js 宽松些，但统一用 language- 更稳
- 代码中出现
<、>、& 必须转义为 、<code>>、&，否则浏览器会解析成真实标签甚至执行脚本
class 值写错或缺失，高亮直接失效
<pre><code class="js">function foo() { return true; }</code></pre>
class 必须含 language- 前缀（如 language-python），highlight.js 严格依赖这个命名；Prism.js 宽松些，但统一用 language- 更稳<、>、& 必须转义为 、<code>>、&，否则浏览器会解析成真实标签甚至执行脚本
即使 DOM 加载完成、CSS 和 JS 全部引入，只要 class 写成 javascript、html5、Javascript 或漏掉，高亮就不会触发。
- highlight.js 只认
language-javascript、language-css、language-html等标准值 - Prism.js 支持
language-js、js，但推荐统一用language-前缀，避免跨库迁移时出问题 - 别在
class里混用多个语言标识，比如class="js typescript"——只会按第一个生效，且可能被忽略
CSS 四项关键样式决定可读性底线
没这四条，哪怕语法着色成功，用户照样看不清缩进、选不中内容、长代码溢出容器。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace：避免 serif 字体干扰小字号下的括号和分号辨识 -
tab-size: 4：否则 Safari / 旧 Chrome 把制表符当 8 格，Python 缩进全乱 -
white-space: pre（默认已有，但显式声明更稳妥）：确保空格与换行不被压缩</li> <li><code>overflow-x: auto</code>：加在 <code><pre></code> 上，不是 <code><code></code>；否则滚动条可能遮挡行号（如果启用）</li> </ul> <H3>JS 初始化时机不对，DOM 就绪前就调用高亮函数</H3> <p>把 <code>hljs.highlightAll()</code> 或 <code>Prism.highlightAll()</code> 放在 <code><head></code> 里同步执行，基本等于没写——因为此时 <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"> 节点还没加载进 DOM。</p> <ul> <li>highlight.js 推荐放在 <code><body>
底部，或监听DOMContentLoaded：
document.addEventListener('DOMContentLoaded', () => {
hljs.highlightAll();
});
<script src="prism.js"></script> 出现在所有 <pre class="brush:php;toolbar:false;"> 上方，仍可能漏掉部分块（尤其动态插入的）</li> <li>动态插入代码后，需手动调用一次高亮：例如 <code>hljs.highlightElement(codeEl)（传入单个
<code> 元素）language- 命名、HTML 实体转义、<code> 嵌套、CSS 四要素、JS 执行时机——五处任一遗漏，都会导致视觉或语义断裂。最常被跳过的其实是转义和 <code>tab-size</code>。</code>
