html如何显示代码块_html中pre与code标签用法-html教程-PHP中文网

仅保留空白符无语义，须嵌套标识代码语义；为行内元素需支撑换行；css应重置默认样式并设置等宽字体、tab-size及utf-8编码。

html如何显示代码块_html中pre与code标签用法

pre 标签只负责换行和空格，不带语义

<pre class="brush:php;toolbar:false;"></pre> 的核心作用是原样保留文本中的空白符（空格、制表符、换行），浏览器不会像处理普通段落那样折叠或合并。但它本身不表示“这是代码”，只是个格式容器。常见错误是只用 <pre class="brush:php;toolbar:false;"></pre> 包裹代码却没加 <code>，导致屏幕阅读器无法识别内容类型，SEO 也丢失语义信息。

实际使用时建议始终嵌套：<pre class="brush:php;toolbar:false;"><code>...</code></pre>。这样既保留格式，又明确语义。如果只展示纯文本（比如诗歌、ASCII 图），单独用 <pre class="brush:php;toolbar:false;"></pre> 是合理的。

code 标签必须在 pre 内才能换行显示多行代码

<code> 本身是行内元素，它只告诉浏览器“这段是代码”，但默认会把所有换行当空格处理。直接写：

<code>
function hello() {
  console.log('hi');
}</code>

结果是一整行挤在一起。要让换行生效，必须包裹在 <pre class="brush:php;toolbar:false;"></pre> 里：

<pre class="brush:php;toolbar:false;"><code>
function hello() {
  console.log('hi');
}</code>

注意：CSS 中 white-space: pre 或 pre-wrap 也能模拟类似效果，但语义和可访问性不如原生 <pre class="brush:php;toolbar:false;"><code></code> 组合。</pre>

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

样式控制优先用 CSS，别依赖 pre 的默认缩进

不同浏览器对 <pre class="brush:php;toolbar:false;"></pre> 的默认 margin、font-family 和缩进宽度（如 tab-width）可能不一致。容易踩的坑包括：

未重置 margin 导致上下间距过大
没设 font-family: monospace，代码字体变成衬线体，可读性差
没设 tab-size: 4，导致缩进混乱（尤其从 IDE 复制过来的代码）
没限制宽度或启用换行，长行溢出容器

推荐最小样式配置：

pre code {
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}
pre {
  margin: 0;
  padding: 1em;
  background: #f5f5f5;
}