示例文章：Markdown 基础

标题与目录

正文里的二到四级标题会被自动收集成右下角的目录浮窗，不需要手工维护。标题右侧的锚点在鼠标悬停时出现，复制链接可以直接定位到这一节。

行内样式

基础的强调用 **加粗**、*斜体*、***粗斜体***，行内代码用一对反引号包住，链接写成 [文字](地址)：

这一段里有 加粗、斜体、粗斜体 和 行内代码，也可以放一个外部链接。删除线用两个波浪线：这样。

模板另外支持高亮、上下标和 emoji 简写：==重点==、^上标^、~下标~、:tada:。

这句话里有 需要重点标注 的内容，水的化学式是 H₂O，面积单位可以写成 cm²，庆祝一下 🎉。

列表与引用

无序列表用 - 开头，有序列表用数字加点，都可以嵌套：

• 第一项
• 第二项
  • 嵌套的子项
  • 另一个子项

1. 第一步
2. 第二步
3. 第三步

普通引用用 > 开头，适合放摘录或补充说明；提示块是它的特殊形式。

这是一段普通的引用，样式会随正文主题变化。

分隔线用三个连字符：

定义列表

术语单独一行，下一行用 : 开头写定义，连续几条定义会归到同一个术语下：

Markdown

一种轻量级标记语言，用纯文本写结构化内容。

Astro

面向内容站点的静态站点框架，默认输出纯 HTML。

需要交互时，可以在组件里直接写脚本。

提示块

用 GitHub 风格的 blockquote 写法，支持 NOTE、TIP、IMPORTANT、WARNING、CAUTION：

表格

脚注

正文里需要补充说明的地方可以加脚注¹，它们会集中显示在文章末尾，并用虚线和正文隔开。

图片与图注

图片后接一段引号包裹的说明，就会渲染成图注。图片后面再紧跟 {width=… height=… align=…}，可以单独控制尺寸和对齐；只写 width 或 height 时，另一边会按原图比例自动缩放：

点击封面或正文里的任意图片可以放大预览，按 Esc、点击遮罩或右上角按钮关闭。

音频

Markdown 里直接写一段原生 <audio> 就能放音频，播放器会跟着正文排版主题走。播放后往下滚动，底部会浮出一条迷你控制条，边读边听不用回到原位；离开文章或开始播放另一条音轨时，上一条会自动暂停：

<audio controls src="/audio/demo.mp3" data-title="夜航" data-artist="AskTao · 示例音轨"></audio>

data-title 和 data-artist 决定卡片上的两行文字，省略时标题显示「未命名音轨」，副标题留空。

src 也可以直接写在线直链，构建期不会下载音频，播放时才发起请求。这条示例加了 preload="none"，页面打开时不会预取，点播放后才加载元数据和音频流：

<audio controls preload="none" src="https://…/episode.mp3" data-title="在线单集" data-artist="远程音源"></audio>

代码块

fenced code block 由 Shiki 在构建期高亮，行号高亮可以在语言后面加 {行号}：

type Post = {
  title: string
  date: Date
  tags: string[]
}

const format = (post: Post) => `${post.title} · ${post.date.getFullYear()}`

也可以用注释标记高亮、新增和删除行：

const config = {
  postsPerPage: 12,
  latestPostsCount: 8,
  showDrafts: true,
}

在语言后面写 title="app.ts" 或 file="app.ts"，代码块上方会多出一条文件名；鼠标移到代码块上，右上角出现复制按钮：

type Post = {
  title: string
  date: Date
}

const format = (post: Post) => `${post.title} · ${post.date.getFullYear()}`

数学公式

行内公式用一对美元符号，长公式用两个美元符号单独成段。公式在构建期由 KaTeX 渲染成 HTML，页面里不需要再加载脚本。

流程图与时序图

代码块语言写 mermaid 就会渲染成图表，切换深浅色主题后会用新主题重新渲染，不需要刷新页面。

flowchart LR
  A[Markdown 源文件] --> B{Astro 构建}
  B -->|构建期| C[静态 HTML + KaTeX]
  B -->|构建期| D[压缩后的 CSS / JS]
  C --> E[浏览器]
  D --> E
  E -->|按需| F[Mermaid 渲染 SVG]

sequenceDiagram
  participant U as 访问者
  participant S as 站点
  participant W as Service Worker
  U->>S: 请求页面
  S-->>U: 返回 HTML
  U->>W: 注册预缓存
  W-->>U: 离线可用

内联 SVG

SVG 可以直接写在 Markdown 里，渐变、描边这些能力都能用：

图标类 SVG 把颜色写成 currentColor，就会跟随深浅色主题自动变色。

动态效果同样可以直接写在 Markdown 里，用 <style> + @keyframes 实现：

动画会尊重系统的「减少动态效果」设置：开启后直接呈现画完的线条。