让 Markdown 的阅读体验再好一点

技术实践Northline2 分钟阅读

Markdown 把写作界面简化为文本,但最终的阅读体验,仍然取决于页面如何呈现这些文本。

从行长和行高开始

一行文字太长,换行时容易丢失位置;太短,则会打断句子的连续性。正文宽度需要与字号配合,让眼睛可以自然地找到下一行。

中文长文通常需要较舒展的行高。段落之间的间距也不应该仅靠空行堆叠,而要形成稳定的阅读节奏。

标题是文章的路标

标题不仅用来放大文字,也在表达内容的从属关系。先安排好二级标题,再决定哪些内容需要三级标题,文章结构就会自然浮现。

代码块需要自己的空间

代码里的长行在窄屏上不应该撑开整个页面。保留代码块内部横向滚动,可以同时照顾可读性与布局稳定。

const notes = ['观察', '实践', '记录'];
const journal = notes.map((note, index) => ({ id: index + 1, note }));
console.log(journal);

行内代码,例如 getCollection(),使用轻微的背景色就能与正文区分,不必抢走整句话的注意力。

图片也属于阅读节奏

晨雾中的蓝色山林与河流

图片的说明应该帮助读者理解它与上下文的关系。适当留白,会让视觉信息和文字之间的切换更加从容。

让结构先于装饰

当文章的标题层级、段落和列表已经清楚,视觉样式只需要进一步强化它们。真正让阅读舒服的,往往是这些不容易被注意到的基础选择。