标签不转义html字符，需手动将、&等转为对应实体，多行代码须嵌套，动态插入应使用textcontent或服务端编码确保安全。

<code> 标签本身不转义尖括号——直接写 <div>，浏览器真会去解析那个 <code><div> 标签，而不是显示它。 <h3>为什么<code><code>里写<img>会出问题

因为 <code> 是纯行内容器，只语义化“这是段代码”，不干预 HTML 解析流程。你塞进去的 <img src="x"> 会被 HTML 解析器照常识别、执行，可能渲染空白图、触发网络请求，甚至破坏 DOM 结构。

常见错误现象：

• 页面中突然出现一个没 src 的 <img>，控制台报 404
• 写 <script>alert(1)</script>，结果弹窗了
• 嵌套结构错乱，比如 <ul><li>item</li></ul> 导致列表样式丢失

必须手动转义 和 <code>> 才安全

所有出现在 <code> 内部的尖括号、& 符号，都要替换成对应 HTML 实体。顺序很重要：先处理 &，再处理 和 <code>>，否则 可能被二次转义成 <code><。

正确转义步骤：

• & → &（第一步，不可省）
• → <code>
• > → >
• 双引号 " → "（如果在属性值里出现）

例如：<div class="demo">Hello</div> 应写作：<div class="demo">Hello</div>

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

多行代码必须套 <pre class="brush:php;toolbar:false;"></pre>，不能只靠 <code>

<code> 是行内元素，连续空格、换行符全被压缩。想保留缩进和换行，必须用 <pre class="brush:php;toolbar:false;"></pre> 包一层。

标准组合是：

<header>
  <h1>Title</h1>
</header>

注意点：

• <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 是合法嵌套；&lt;code&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;</pre> 会被浏览器自动修正，语义错乱
• 长代码建议加 CSS：pre { white-space: pre-wrap; overflow-x: auto; }
• 如果要用语法高亮（如 Prism 或 highlight.js），class 名要匹配工具要求，比如 class="html"，不是 class="html" 或 data-lang="html"

服务端或 JS 动态插入时更省事的方案

手动替换容易漏、难维护，尤其当内容来自用户输入或 CMS。推荐两种更鲁棒的做法：

• 服务端输出前统一做 HTML 实体编码（如 Node.js 用 he.encode()，PHP 用 htmlspecialchars()）
• 前端 JS 插入时用 textContent 而非 innerHTML：el.textContent = '<div>'; —— 浏览器自动把所有特殊字符当文本处理，不用手写 <code><

  最容易被忽略的是：哪怕用了 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;，只要内容是通过 &lt;code&gt;innerHTML&lt;/code&gt; 注入且未转义，照样执行脚本、渲染标签。安全边界不在标签组合，而在内容是否真正“文本化”。</pre>