你的技术博客，读者点进来不到15秒就划走了？别急着怪算法——先低头看看你贴的代码块：密密麻麻、小得费眼、白底黑字刺得人想关页面。
这真不是夸张。我上周帮一个做嵌入式开发的朋友看稿，他写的SPI驱动调试流程特别清楚，结果评论区第一条是：“代码根本没法抄，缩进全乱了，行号也没有……”——内容再硬核，卡在代码展示这一步，等于没写。
你的代码块到底丑在哪？
打开你的博客，满屏挤在一起的代码，字体小到要放大镜看，背景色刺眼得像闪光弹。读者第一眼就皱眉，第二眼就关页面。
我见过太多技术博主，内容深度够，排版也用心，唯独代码块像后妈养的。
真实案例：一个做Python教程的朋友，文章阅读量一直上不去。我让他截图代码块给我看——白底黑字，没有行号，代码直接溢出到页面外。我帮他换了深色主题、加了行号、调大字体和行距。两周后他跟我说，页面平均停留时间明显提升，评论区有人专门夸“这段代码看着舒服”。
代码块不是让你随便贴个 <code> 标签就完事的。它是你文章的门面，是读者判断你是否专业的第一个信号。一个干净、易读、有呼吸感的代码块，能让读者下意识觉得：“这个博主靠谱。”
第一印象杀手：字体和背景色怎么选？
很多人以为代码块就是换个灰背景、用等宽字体。错。真正好的代码块，要让读者看代码像看小说一样舒服。
字体别用系统默认的 monospace。试试 Fira Code 或 JetBrains Mono——它们支持连字（ligature），!= 会自动显示成 ≠，=> 变成 ⇒。符号一眼认出，不用再数等号。
背景色上，深色主题（比如 One Dark 或 Dracula）确实是主流选择。但别照搬。你可以把背景从纯黑换成 #1e1e2e，文字从死白换成 #cdd6f4。对比度柔和一点，眼睛才不累。
字体大小至少 16px。别信“代码就得小才专业”的老话。读者在手机上看你文章，14px 的字得双指放大、拖来拖去，一次两次还行，三次直接走人。
真实案例：我自己的博客，代码块字体从14px改成16px后，移动端跳出率显著下降。就这么简单一个改动。
行号和复制按钮：两个被低估的刚需
你写一段代码，里面有个bug在第23行。如果你没给行号，读者得自己一行行数，数到一半忘了，又从头数。这种体验，像让人用没有刻度的尺子量长度。
行号必须要有。而且要和代码本身拉开距离：行号用浅灰、字号稍小、右对齐。读者扫一眼就知道“第15行有问题”，直接定位。
复制按钮也是刚需。你贴了一段 pip install 或 systemctl restart 命令，读者想复制到终端运行。没有复制按钮，他得手动选中、右键复制，一不小心多选了个空格或换行符——命令报错，回头还得翻你文章找原样。有复制按钮，一键搞定，体验直接拉满。
真实案例：一个做Linux教程的博主，文章里贴了很多 curl 和 apt-get 命令。加了复制按钮后，评论区问“怎么复制”的问题直接清零。用户爽了，你的口碑也上去了。
代码高亮选错主题，小心读者眼瞎
代码高亮不是越花哨越好。有些主题把关键字标成荧光绿，字符串标成亮粉色，变量名标成电蓝色。整段代码像霓虹灯广告牌，看5秒就眼睛疼。
选高亮主题的核心原则：颜色数量控制在5-6种以内。关键字一种，字符串一种，注释一种，函数名一种，变量一种，就够了。饱和度要低——用 #89b4fa 代替 #0000ff，用 #f38ba8 代替 #ff0000。
还有，注意颜色和背景之间的对比度。关键字和背景、字符串和背景，都得能一眼分清。可以用在线工具随手测一下，确保基本可读。
真实案例：一个写JavaScript教程的博主，代码块用的是默认的 Monokai 主题。我建议他换成 Catppuccin Mocha，颜色更柔和。他一开始不信，说Monokai是经典。结果他发了个投票让读者选，八成以上选了Catppuccin。有时候经典，只是因为没人改过。
手机端代码块：90%的人忽略的致命伤
你写文章时肯定在电脑上编辑，代码块看着好好的。但读者用手机打开，代码直接溢出页面，横向滚动条出现，阅读体验瞬间崩盘。
手机端代码块优化就两点：该换行的换行，该滚动的滚动，别硬扛。
短代码（比如单行命令），直接允许自动换行。CSS 加上 word-break: break-word; 和 overflow-wrap: break-word;。读者不用左右滑，一眼看完。
长代码（比如几十行的函数定义），保留横向滚动。加 overflow-x: auto;，滚动条要清晰可见。读者知道要滑，不会懵。但前提是——手机端代码字体不能小于 14px，不然滑了也看不清。
真实案例：一个做Vue教程的博主，手机端代码块字体只有12px，而且不换行。我让他改成16px（手机专用）并开启自动换行。他反馈说，手机端阅读完成率大幅增长。别让你的读者在手机上受罪。
用CSS给代码块加呼吸感
代码块不是信息转储区，它是你文章的一部分。一个好的代码块，应该有“呼吸感”。
什么是呼吸感？上下左右留白要够。内边距至少 1em，上下外边距至少 1.5em。代码块和前后段落之间要有明显分隔——可以加 border-radius: 8px 做圆角，或者用 box-shadow: 0 2px 6px rgba(0,0,0,0.05) 加一点阴影。
行间距也很关键。line-height: 1.6 是底线，1.8 更宽松。太挤容易看串行；太松又显得松散。找到那个让眼睛不累的节奏。
真实案例：我一个前端朋友，博客代码块用了 padding: 0.5em，行间距1.2。我让他改成 padding: 1em 1.5em，行间距1.6。他跟我说，改完后自己读文章都舒服多了，读者反馈也变好了。有时候细节决定专业度。
结尾：今天就能执行的3个操作
别收藏吃灰，现在打开你正在用的写作/发布工具，马上动手：
换字体和背景色：打开你博客的CSS文件（或主题设置里的自定义CSS），把代码块字体改成
'Fira Code', 'JetBrains Mono', monospace，背景色设为#1e1e2e，文字颜色设为#cdd6f4，字体大小设为16px。加行号和复制按钮：如果你用的是 Hugo、Hexo 或 VuePress 这类静态博客，去
_config.yml或主题配置里搜lineNumbers和copyButton，把它们设为true。如果是 WordPress，打开插件页，装一个叫Code Syntax Block的插件，它自带行号+一键复制。手机端优化：在代码块的CSS里加上这两行：
word-break: break-word; overflow-x: auto;再加一条媒体查询，确保手机端字体不小于
14px。改完立刻用手机浏览器打开你最新一篇带代码的文章，滑一滑、看一看、试一试。
做完这三个，你的代码块起码能打70分。剩下30分，靠你写代码时的命名规范和注释质量来补。代码块变好看了，读者才愿意多看两眼你的代码，你的技术才有人懂。