anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
code 标签仅用于包裹单行、无换行的行内代码片段，如函数名、变量名或简短命令；多行代码须用 pre 嵌套 code，否则语义与格式均失效。
code 标签不是代码块容器，它只适合包裹单行、无换行的代码片段，比如函数名或命令；多行代码必须用
<pre class="brush:php;toolbar:false;"> 嵌套结构，否则格式全丢、语义错乱。 <h3>什么时候该用 <code>code</code> </h3>而不是
<pre class="brush:php;toolbar:false;"> <p>只在段落中提一个短小技术名词时用：<code>code</code></p>是行内元素，天生适配文本流。
-
fetch()✅ 正确：浏览器保持行高正常，屏幕阅读器读作“fetch 函数” -
useState✅ 正确：变量/钩子名，上下文明确 -
npm install✅ 正确：命令短，不换行 if (x ❌ 错误：含 <code> 且逻辑多行，未转义 + 格式丢失-
<div class="app"></div>❌ 错误：未转义和 <code>>，浏览器会解析为真实标签
<pre class="brush:php;toolbar:false;"> 必须嵌套，不能只用其中一个
保格式，<code> 定语义——两者缺一不可。单独用 <pre class="brush:php;toolbar:false;">，高亮库（如 Prism.js）无法识别语言；单独用 <code>，所有缩进和换行被压成一行。
<ul>
<li>正确写法：<pre class="brush:js;toolbar:false;">function greet() { return 'hi'; }
function greet() { return 'hi'; }
function greet() { return 'hi'; } → 搜索引擎当普通文本，不索引为代码class="js" 不是必须，但加上能触发语法高亮库自动识别HTML 特殊字符必须手动转义， 不会帮你做
code
- 必须转义：
→ <code>，<code>>→>，&→& - 危险示例：
if (a d)→ 实际被解析为标签或中断 DOM - 安全写法：
if (a d) - 纯文本展示更省心：用
textContent替代innerHTML，例如el.textContent = '<div>test</div>'
CSS 控制 <pre class="brush:php;toolbar:false;"> 显示效果的关键点
没样式也能显示，但体验差。几个硬性设置建议直接加到 CSS 里：
-
必须设 <code>overflow-x: auto</code>
，否则长代码横向撑破容器 -
code要设display: block，否则它作为行内元素，不响应的宽高和滚动
- 字体推荐：
font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace，比默认更稳 - 别给
code单独设white-space: pre——它已从继承，重复设置可能干扰层叠
最容易被忽略的是混用边界：有人把整段 Shell 脚本塞进 code，有人把 console.log() 单独包一层
。唯一判断标准——要不要保留原始换行和缩进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
