code标签仅负责语义标记和等宽渲染，不提供高亮功能；单行代码用code+CSS类（如.kw），多行必须用嵌套结构，并配合Prism.js等库实现语法高亮。

code 标签本身不提供“突出显示”功能，它只负责语义标记和基础等宽渲染。真要突出关键代码（比如高亮某行、变色某个变量），得靠 CSS 或 JS 库配合，且必须严格区分使用场景。

单行内联代码用 code + CSS 类控制样式

适合在段落中强调函数名、参数或命令，比如“调用 fetch() 时传入 AbortSignal”。这时 code 是唯一语义正确的选择。

• 必须显式设置 font-family: monospace，否则可能继承正文字体，失去代码感
• 加背景色或边框要小心：避免用 white-space: pre，否则长内容会溢出容器且基线错位
• 推荐轻量级类名，例如：const，再配 CSS：.kw { background: #ffeb3b; padding: 0 3px; }
• 别给 code 加 display: block 或 width: 100%——它本就是行内元素，强行块化会破坏段落流

多行代码块必须用

<pre class="brush:php;toolbar:false;"> 嵌套结构

想高亮整个函数体、配置片段或命令输出，code 单独用会塌成一行、缩进全丢。必须用

<pre class="brush:php;toolbar:false;"><code>...</code>

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• pre 负责保留换行与空格，code 负责声明“这是代码”，二者缺一不可
• 横向溢出是高频问题：加 overflow-x: auto 到 pre，而不是 code
• tab 缩进不统一？用 CSS 控制：pre { tab-size: 2; }
• 漏转义 、>、& 会导致 HTML 解析失败——比如写
  必须写成

  语法高亮不能靠 code 标签自动实现

  code 标签不解析语法，也不打 token class。所谓“高亮”，本质是把 const、"string"、// comment 分别加上 class="keyword"、class="string" 等，再配 CSS 颜色。

  • Prism.js 或 highlight.js 是主流方案，它们只认

    <code class="js"></code> 这种结构

  • class="js" 必须写在 code 上，不是 pre 上；否则高亮库无法识别语言
  • 服务端渲染（如 Next.js）需确保高亮逻辑在客户端执行，否则 SSR 时无 class 输出
  • 别手动给每个单词加 class——维护成本爆炸，且破坏可访问性

  最常被忽略的是职责边界：code 只管“这是代码”，pre 只管“按原样排版”，颜色、行号、复制按钮这些都得靠额外层介入。混用或跳过其中一环，轻则格式错乱，重则 DOM 损毁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！