Markdown 排版与代码示例

下面按元素展示 Markdown 和 GFM 写法。代码围栏内是源文本，围栏外是页面效果。

标题与段落

文章主标题来自元信息，正文建议从二级标题 ## 开始，按需要使用 ###。小标题会形成正文目录，层级应表达内容关系。

1## 第一个问题23这是第一段，段落之间留一个空行。45### 更具体的观察67这是另一段。

一段中文与英文混排

这是一段中文排版样例。段落包含中文标点、English words 和较长的说明，用于观察字体、行距和自动换行。改变窗口宽度时，正文在阅读区域内重新排列；表格和代码的长行在各自区域内滚动。

Astro 负责页面组织，Markdown 保存正文。像 status: draft 这样的短表达适合使用行内代码；普通说明继续使用自然语言，避免整段都变成技术标识。

强调、引用与换行

1**关键结论**、*轻度强调*、~~不再采用的说法~~和 `行内代码`。23> 先留下问题，再补充能回答它的材料。

关键结论、轻度强调、不再采用的说法和 行内代码。

先留下问题，再补充能回答它的材料。

引用也可以包含第二段，用来补足上下文。

普通段落靠空行分开。如果需要同段内的硬换行，可以在行末放两个空格。不要用连续空行代替页面间距。

列表与任务

11. 先确定要回答的问题。22. 再组织材料。3   - 保留来源。4   - 写下自己的解释。56- [x] 留下标题7- [ ] 补充可验证的例子

1. 先确定要回答的问题。
2. 再组织材料。
   • 保留来源。
   • 写下自己的解释。
3. 完成之后读一遍，检查步骤是否连贯。

• 留下标题
• 记录来源
• 在自己的文章中应用一次

任务列表用于展示记录中的完成状态。网站没有在线编辑后台，勾选状态应在 Markdown 源文件中维护。

表格与长内容

1| 内容 | 用途 |2| --- | --- |3| `summary` | 帮助读者选择文章 |4| 正文 | 展开过程与依据 |

表格、任务列表和删除线属于当前明确支持的 GFM 扩展。基础规则可查CommonMark 参考。

图片、链接与附件

图片使用相对于本文的文件路径，方括号写替代文字。本图是模板内绘制的流程示意，帮助说明内容怎样变成网页。

1![源文件经过构建后生成可阅读网页的流程](./reading-flow.svg)

图示：正文先保存为源文件，构建后才成为页面。说明文字使用普通段落维护，不需要插入 HTML。

站内链接可以写成 [写作指南](content:source)，效果见写作指南。下载附件也用相对路径，写法和移动文件时的注意事项见正文链接与附件。

代码、终端与提示

源码与高亮

代码围栏第一行依次写语言和可选的显示设置。title="reading-note.ts" 显示文件名，{3-4} 突出第 3 至 4 行，caption 显示代码下方的说明。复制按钮只复制源码。

1```typescript title="reading-note.ts" {3-4} caption="记录问题和自己的解释。"2const title = '阅读记录';3const note = {4  question: '这段说明回答了哪个问题？',5  explanation: '先复述，再补回限制条件。',6};78console.log(title, note);9```

1const title = '阅读记录';2const note = {3  question: '这段说明回答了哪个问题？',4  explanation: '先复述，再补回限制条件。',5};67console.log(title, note);

未指定语言或找不到对应高亮器时，代码仍会显示。窄屏上的长行可以在代码块内横向滚动。

终端输出

用 terminal 围栏展示命令和输出。它有独立样式，省去源码行号和复制按钮。

$ node reading-note.js

阅读记录
已保存：问题、解释与下一步。

NOTE 提示

普通引用继续使用 >。需要单独提示时，在引用首行写 [!NOTE]，后面可加标题。

1> [!NOTE] 复制之前2> 先核对文件和上下文，再运行示例。