代码块怎么排版好看：宽度、换行与配色的取舍

同样一段代码，放进文章里立刻显得乱：缩进被吃掉、长行折成两截、背景色和正文撞在一起。读者还没看逻辑，先被排版劝退了。

代码块排版好看与否，和配色关系不大，主要取决于三件事：等宽字体、可控宽度、足够的留白。下面按优先级说，最后给一份发布前的检查清单。

一、三条底层规则，比配色重要得多

先解决基础问题，再谈美不美。下面三条只要缺一条，代码块一定不好看。

• 等宽字体。代码靠列对齐传达结构，比例字体会让缩进错位。中文注释混排时，字体还要保证中英文宽度比例稳定。
• 背景与正文区分。浅灰底最稳，深色底适合技术类站点但不适合长文夹排。关键是和正文有明显但不刺眼的对比。
• 四周留白。代码块上下至少半个行高，左右留出一字左右的内边距。贴边的代码看起来像被裁掉了。

第三条最常被忽略：背景铺满内容区、左右零内边距，视觉上非常挤。

还有一条：代码块的行高要比正文紧一档，行距太散会看不出块结构。

二、宽度与换行：三种方案各有代价

长行是代码排版里最难的一关。屏幕宽度有限，而代码行没有天然的换行点。三种常见处理方式，没有一种完美。

正文里推荐第一种，配合一个可见的滚动提示。软换行看起来省事，但折行会破坏缩进，读者容易误读嵌套层级，这是技术文章里最危险的一类错误。

第三种只在代码本身允许时使用，比如链式调用可以拆行、参数列表可以换行。如果拆行需要加续行符，就要谨慎，改错一个符号，示例就跑不起来。

经验值：单行超过 80 个字符就该考虑拆，再长横向滚动会成为常态。

三、行号、高亮与配色：三个可以省的装饰

很多代码块「不好看」，是因为装饰太多。下面三项按需使用，不是越多越专业。

行号最容易变成负担。它对复制不友好，读者复制时会带上数字；它还会挤占本就不宽的行长。只在正文确实要按行引用时加。

语法高亮则相反，收益明显。它把关键字、字符串、注释分开，读者扫一眼就知道结构。但高亮方案要全站统一，同一篇文章里出现两种配色，会显得像拼贴。

配色不必追求炫。选一套对比度足够的方案，注释别浅到看不见、字符串别亮到刺眼就够用。

四、不同载体的落地与六项检查

同一段代码，发在网页、Word 和公众号，做法完全不同。

公众号那一栏要特别注意。多数编辑器会合并连续空格，缩进直接消失。稳妥做法是先把代码渲染成图片，或者用支持代码样式的第三方编辑器，再粘贴。

Word 里的关键不是插件，而是样式：选中代码段落，统一设为等宽字体、单倍行距、加浅灰底纹，再关掉自动更正里的「首字母大写」和「智能引号」。这两项会把代码改错，比排版难看严重得多。

网页端则要检查制表符。制表符和空格混用时，不同编辑器里显示宽度不一，同一段代码在两台机器上缩进不同。统一用空格，是跨平台最稳的做法。更完整的写法约定可以看代码片段怎么记笔记。

发出去之前，再按顺序过一遍，多数问题都能拦住。

1. 换一台设备看。手机上横向滚动是否可用，长行有没有被截断。
2. 复制一段试试。粘贴到编辑器里，缩进和引号是否还正确。
3. 关掉高亮看。没有颜色时，代码是否仍然读得懂。读不懂说明结构本身不清楚。
4. 检查行号与正文引用是否对应。删过行就要重新核对。
5. 看代码块与上下文的间距。太紧会黏在一起，太松会断成两篇。
6. 确认没有自动转换。引号、破折号、首字母是否被编辑器改过。

第二项是终检。排版再好看，复制出来跑不通就是负分。这一类问题在中文输入法环境下尤其常见，直引号被替换成弯引号，代码直接报错。

第六项则提醒一件事：编辑器越智能，越容易改坏代码。写作时用纯文本或代码模式，能避开大部分自动转换。表格和代码块的宽度问题可以对照表格太宽怎么排版，思路是相通的。

五、常见问题

代码块一定要加语言标记吗

建议加。它决定高亮规则，也方便后续检索。没有标记时，部分渲染器会按纯文本处理，关键字全灰。

浅色主题还是深色主题好

跟着正文走。正文浅色就用浅底代码块，深色页面用深底。强行反差会让页面显得割裂，读者视线也会被反复拉扯。

代码块里能不能加中文注释

可以，而且建议加。中文注释能大幅降低理解成本。注意中英文之间留一个空格，对齐会更稳定，具体规则见中英文混排怎么对齐。

短代码用行内代码还是代码块

一个词、一个函数名用行内代码；超过一行、或者需要保留缩进的，一律用代码块。混用的边界是「有没有结构」，不是「长不长」。更多排版细节可以看排版规范栏目。

小结

代码块好看的关键是等宽字体、可控宽度、足够留白三件事。长行优先横向滚动，别用软换行；行号只在需要按行引用时加；高亮全站统一。发布前记得复制一段验证，排版和正确性一起查。

如果只改一处：给代码块加上下留白和左右内边距。这一步做完，多数页面会立刻不那么挤。