最可靠做法是用嵌套,保留换行空格且不渲染;需HTML转义、&为、&;语法高亮需加class="xxx"并配合JS库。

HTML里怎么显示代码块,不是渲染而是展示源码
直接用 包住内容,再嵌一层 ,这是最可靠、语义最准的做法。浏览器会保留换行和空格,且不执行里面的标签。
常见错误是只用 单独包裹多行代码——它默认是行内元素,换行会被忽略,缩进全乱;或者用 但没加 ,语义缺失,对屏幕阅读器不友好,SEO 也弱。
-
是标准写法<code>console.log("hello");</code> - 如果代码里含
或&,必须先 HTML 转义:、& - 不推荐用
模拟——可复制性差,样式难控,也不语义化
怎么让代码块带语法高亮
纯 HTML 不支持语法高亮,得靠 JS 库(比如 highlight.js 或 Prism.js)或服务端渲染。但前提是代码块得有明确语言标识,否则高亮器无法判断规则。
实现 Markdown↔ HTML 互转,支持导出 PDF,用于用户请求的文档格式转换。
做法很简单:给 加 class 属性,比如 class="javascript",高亮库会自动匹配对应语法。
- 支持的 class 命名格式通常是
language-xxx或lang-xxx(看库文档) - 别写成
class="js"或class="javascript"——多数库不识别简写 - 如果用了
highlight.js,记得在
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










