Markdown 语法指南

Sat, 05 Sep 2026 00:00:00 GMT

import { LinkPreview } from 'astro-pure/advanced' import { Aside, Card, CardList, Collapse, Spoiler, Steps, TabItem, Tabs, Timeline } from 'astro-pure/user' import QRCode from '@/components/QRCode.astro'

export const demoAnswer = 6 * 7

.md 写正文，.mdx 加组件；本页按 CommonMark / GFM、本站扩展和组件分类展示，同类写法合并呈现。标题自动生成目录与锚点。

排版

斜体 · 粗体 · 粗斜体 · ~~删除线~~ · 行内代码 · `含反引号的代码` · *转义*。
1. 完整引用 · astro · astro · 普通链接 · 页内锚点 · https://astro.build · hello@example.com。
2. Ctrl + C · H2O · E = mc2 · AI · 标记。
[x] 自动排版："Smart quotes" -- ...；字符实体：© & →。普通换行仍属于同一段。
[ ] 行末反斜杠强制换行：
用 Spoiler 隐藏答案，悬停揭晓：Astro。

引用、表格与公式

引用段落。

嵌套引用也支持强调和 代码。

| 左对齐 | 居中 | 右对齐 | | :----- | :------------: | ------------------: | | a\|b | $e^{i\pi}+1=0$ | {demoAnswer}[^note] |

$$ \operatorname{softmax}(z_i)=\frac{e^{z_i}}{\sum_{j=1}^{K}e^{z_j}} $$

.mdx 使用围栏代码，不支持四空格缩进代码块。
<网址>、<邮箱> 也会被当作 JSX，请用裸地址或 Markdown 邮件链接。
.md 的 HTML 注释是 ，MDX 注释写成 {/* 注释 */}。

图表与代码

mermaid / echarts 显示源码，加 -showcase 渲染图表；title 设标题，height=260（px）或 height=16rem 设 ECharts 高度。

源码含文件名、语言标签、行号、复制与超过 15 行自动折叠。独立 %% 注释中：

[!code highlight]（或 hl）高亮。
[!code ++] / [!code --] 标记增删。
[!code focus] 保留重点、淡化其余行；追加 :N 可作用于连续 N 行。
[\!code …] 转义标记，只展示文字、不触发效果；见代码最后一行。

悬停或键盘聚焦代码块恢复全文；行号不参与复制。流程图展示修改后结果。

flowchart LR
%% [!code highlight:2] [!code focus:2]
  A[文档] --> B[切块]
  B --> C[编码]
  C --> D[(向量库)]
  Q[问题] --> E[检索]
  D --> E
%% [!code --] [!code focus]
  E --> G[生成]
%% [!code ++:2] [!code focus:2]
  E --> F[重排]
  F --> G
  subgraph 索引
    A
    B
    C
    D
  end
%% [!code hl] [!code focus]
  G --> H[回答]
%% [\!code focus] 这里只展示标记

flowchart LR
  subgraph 索引
    A[文档] --> B[切块] --> C[编码] --> D[(向量库)]
  end
  Q[问题] --> E[检索]
  D --> E
  E --> F[重排] --> G[生成] --> H[回答]

sequenceDiagram
  autonumber
  participant R as 读者
  participant P as 页面
  participant M as 图表
  R->>P: 打开文章
  P->>M: 滚动到图表时加载
  M-->>P: 返回 SVG
  P-->>R: 显示图表

{"series":[{"type":"pie","data":[{"value":42,"name":"示例"}]}]}

{
  "tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } },
  "legend": {},
  "grid": { "left": 12, "right": 12, "top": 40, "bottom": 10, "containLabel": true },
  "xAxis": { "type": "category", "data": ["1月", "2月", "3月"] },
  "yAxis": [{ "type": "value", "name": "篇" }, { "type": "value", "name": "人" }],
  "series": [
    { "name": "文章", "type": "bar", "barMaxWidth": 24, "itemStyle": { "borderRadius": 4 }, "data": [5, 8, 12] },
    { "name": "教程", "type": "bar", "barMaxWidth": 24, "itemStyle": { "borderRadius": 4 }, "data": [3, 6, 8] },
    { "name": "访问", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 200, 310] },
    { "name": "订阅", "type": "line", "yAxisIndex": 1, "smooth": true, "lineStyle": { "type": "dashed" }, "data": [20, 40, 80] }
  ]
}

{
  "tooltip": { "trigger": "item" },
  "legend": { "bottom": 0 },
  "series": [{
    "type": "pie", "radius": ["40%", "65%"], "center": ["50%", "45%"],
    "itemStyle": { "borderRadius": 6 },
    "data": [{ "value": 42, "name": "教程" }, { "value": 28, "name": "随笔" }, { "value": 18, "name": "笔记" }]
  }]
}

主题组件

标签页默认打开第一项，syncKey 可记住上次选择；以下展示五种 GitHub Alert，以及上游主题自带的四种 Aside。

[!NOTE] 补充说明。

{/* 分隔相邻提示框，避免被 Markdown 合并为同一个引用。 */}

[!TIP] 需要主题组件时使用 .mdx。

{/* */}

[!IMPORTANT] 关键信息。

{/* */}

[!WARNING] 发布前检查链接。

{/* */}

[!CAUTION] 删除前保留备份。

支持强调、代码 和链接。

</Aside>
<Aside type='tip' title='Aside · tip'>补充建议。</Aside>
<Aside type='caution' title='Aside · caution'>代码应与正文一致。</Aside>
<Aside type='danger' title='Aside · danger'>需要特别注意的内容。</Aside>

用 frontmatter 描述文章。
完成正文并发布。

图片可点击放大；二维码用于打开 AITA GitHub，页尾按钮分享本文。

[^note]: 表格中的 42 来自 MDX 导出变量 demoAnswer，用 {demoAnswer} 插入；脚注支持格式、链接和 代码，点击编号往返。

Hello, AITA

Tue, 01 Sep 2026 00:00:00 GMT

Welcome to the AITA blog.

We'll be posting technical write-ups, tutorials, and project updates here as they come — no schedule, just things worth sharing.