正确代码高亮需用 <pre><code class="xxx"> 嵌套结构，类名须为 language-xxx 或 lang-xxx 格式，HTML字符需转义，配合 highlight.js 或 Prism.js 自动生效。

用 `

` 和 `<pre class="brush:php;toolbar:false;">` 结合实现带语法高亮的代码展示，关键不在标签本身（它们只负责结构和语义），而在于配合高亮库自动识别并着色。只要结构写对、类名规范、资源加载到位，高亮就能生效。</p>

<H3>必须用 `<pre class="brush:php;toolbar:false;"><code>` 嵌套结构</H3>
<p>单独 `<code>` 或 `<pre class="brush:php;toolbar:false;">` 都不行——`<pre class="brush:php;toolbar:false;">` 保证换行缩进不丢失，`<code>` 表明这是计算机代码，二者嵌套是 highlight.js 和 Prism.js 的硬性约定。</p>
<ul>
  <li>✅ 正确：<code><pre><code class="html"><div>Hello</div></code></pre>

❌ 错误：<p><code><div></code></p>（不会触发高亮） <li>⚠️ 注意：HTML 特殊字符必须转义，比如 `，`>` 写成 <code>>，否则浏览器会尝试解析为标签

语言标识要写对 class 名

高亮库靠 `class` 属性判断语言类型，必须是 language-xxx 或 lang-xxx 格式，且值要准确。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 支持的写法：class="js"、class="lang-css"、class="python"
• 不识别的写法：class="js"、class="javascript"、class="html5"
• HTML 示例：<code class="html"><header><h1>Title</h1></header></code>

引入高亮库并确保执行时机正确

推荐用 CDN 引入 highlight.js（最轻量）或 Prism.js（插件丰富），但要注意加载顺序和初始化方式。

立即学习“前端免费学习笔记（深入）”；

• highlight.js：引入 CSS + JS 后，调用 hljs.highlightAll()（放在 </body> 前或 DOMContentLoaded 里）
• Prism.js：引入 CSS + core JS + 对应语言 JS（如 prism-html.min.js），它会自动运行，无需手动调用
• 常见失败原因：JS 在 DOM 渲染前执行、CSS 没加载、CDN 链接拼错、class 名写错

基础样式增强可读性（非高亮，但很必要）

即使没用高亮库，也建议加一点 CSS 让代码区域更清晰：

• pre 加浅灰背景、圆角、横向滚动条：background:#f8f9fa; border-radius:4px; overflow-x:auto; padding:12px;
• code 行内用等宽字体+微背景：font-family:monospace; background:#e9ecef; padding:2px 6px; border-radius:3px;
• 避免全站用默认样式，否则代码块和普通文本几乎看不出区别