使用PRE和CODE标签组合可语义化地展示代码，PRE保留格式，CODE声明代码语义，嵌套使用并添加language-类名以支持语法高亮，通过CSS设置等宽字体、背景色、圆角、内边距及滚动，结合Prism.js等工具实现美观可读的代码展示。
在网页中展示代码，既要保证可读性，又要保持样式美观。使用 PRE 和 CODE 标签的组合，是语义化且实用的最佳实践。
为什么用 PRE 和 CODE？
PRE（preformatted text）保留空格和换行，适合展示原始代码结构。它让缩进、制表符和回车都原样呈现。CODE 用于标记代码片段，是语义化的“这就是代码”的声明。浏览器默认会为其设置等宽字体。两者嵌套使用，既保留格式，又增强语义：
<code class="js">...</code>
基础写法与语义搭配
标准结构如下：
把 CODE 套在 PRE 里，表示“一段格式化的代码”：
def hello(): print("Hello, world!")
给 CODE 添加 language-xxx 类名，便于后续语法高亮工具识别语言类型。
美化样式：从可读到优雅
默认样式往往不够美观。通过 CSS 可以大幅提升视觉体验：设置等宽字体：font-family: 'Courier New', monospace, Consolas, 'SFMono-Regular'; 添加背景色和圆角：background: #f4f4f4; border-radius: 6px; 内边距留出呼吸空间：padding: 1rem; 控制最大高度并允许滚动：max-height: 300px; overflow-y: auto;这样既防止代码撑破布局，又提升阅读舒适度。
配合语法高亮工具更进一步
纯文本代码缺少色彩区分。引入如 Prism.js 或 Highlight.js 等工具，能自动为不同语法元素着色。只需引入库文件，并确保 CODE 标签有正确的类名：
const greet = (name) => { return `Hello, ${name}!`;};
这些工具会解析类名中的语言标识，自动完成着色。
基本上就这些。PRE 负责格式保留，CODE 提供语义，加上一点样式和高亮，就能在网页上优雅地呈现代码块。不复杂但容易忽略细节。
以上就是怎样在网页上优雅地展示代码块？PRE和CODE标签的组合拳。的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579330.html
微信扫一扫 
支付宝扫一扫 
