1
# 一级标题（页面主标题，每篇限 1 个）
2
## 二级标题（章节）
3
### 三级标题（小节）
4
#### 四级标题（细节）

1
**加粗** 或 __加粗__      →  **加粗**
2
*斜体* 或 _斜体_          →  *斜体*
3
***加粗斜体***           →  ***加粗斜体***
4
~~删除线~~               →  ~~删除线~~
5
`行内代码`               →  `行内代码`
6
> 引用块                →  > 引用块

1
<!-- 无序列表 -->
2
- 项目 1
3
- 项目 2
4
  - 子项目（缩进 2 空格）
5

6
<!-- 有序列表 -->
7
1. 第一步
8
2. 第二步
9
   1. 子步骤（缩进 3 空格 + 数字）
10

11
<!-- 任务列表（Fuwari 支持 ✅） -->
12
- [ ] 待办事项
13
- [x] 已完成

1
<!-- 链接 -->
2
[显示文本](https://upsubs.com)
3
[带标题](https://upsubs.com "点击跳转")
4

5
<!-- 图片 -->
6
![替代文本](/favicon/icon.png)
7
![带尺寸](/img.png "标题" =300x200)  // 部分渲染器支持
8

9
<!-- 参考式链接（长文推荐） -->
10
[官网][1]
11
[1]: https://upsubs.com "可选标题"

1
---  或  ***  或  ___   →  水平分割线
2

3
行尾加 2 个空格 + 回车   →  强制换行（否则合并为一段）

1
| 左对齐 | 居中对齐 | 右对齐 |
2
|:-------|:--------:|-------:|
3
| 左     |   中     |     右 |
4
| Left   |  Center  |  Right |
5

6
<!-- 技巧：用 - 对齐列宽，提升源码可读性 -->

1
\* 显示星号本身 → *
2
\` 显示反引号 → `
3
\\ 显示反斜杠 → \
4

5
<!-- HTML 实体（兼容所有渲染器） -->
6
&amp; → &   &lt; → <   &gt; → >   &nbsp; → 空格

1
这是一个观点[^1]，支持详细说明。
2

3
[^1]: 脚注内容会显示在文末，适合补充技术细节。

1
术语 1
2
: 定义内容 1
3

4
术语 2
5
: 定义内容 2

1
```ts
2
// TypeScript 示例
3
const name: string = "upsubs";
4
console.log(`Hello, ${name}`);

1
---
2
// Astro 组件示例
3
import Layout from '../layouts/Layout.astro';
4
export interface Props { title: string; }
5
const { title } = Astro.props;
6
---
7
<Layout title={title}>
8
  <h1>{title}</h1>
9
  <slot />
10
</Layout>

1
> ✅ **Fuwari 支持语言**：`ts` `js` `astro` `html` `css` `bash` `json` `yaml` `python` `go` 等（基于 Shiki）
2
>
3

4
### **代码块高级用法**
5

6
```markdown
7
<!-- 显示行号 -->
8
```ts:src/config.ts showLineNumbers
9
export const siteConfig = { ... }

1
const a = 1;
2
const b = 2;  // ← 高亮
3
const c = 3;  // ← 高亮
4
const d = 4;  // ← 高亮
5
const e = 5;
6
// ...
7
const result = a + b;  // ← 高亮

1
$ pnpm run build
2
✓ built in 1.2s

1
### **文件树展示**
2

3
```markdown
4
```text
5
src/
6
├── content/
7
│   └── posts/
8
│       └── hello.md
9
├── components/
10
└── layouts/

1
---
2

3
## **📐 数学公式 / 图表 / 交互**
4

5
### **数学公式（需启用 `remark-math` + `rehype-katex`）**
6

7
```markdown
8
<!-- 行内公式 -->
9
欧拉公式：$e^{i\pi} + 1 = 0$
10

11
<!-- 独立公式 -->
12
$$
13
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
14
$$
15

16
<!-- 多行对齐 -->
17
$$
18
\begin{aligned}
19
f(x) &= x^2 + 2x + 1 \\
20
     &= (x+1)^2
21
\end{aligned}
22
$$

1
```mermaid
2
graph LR
3
  A[开始] --> B{是否完成?}
4
  B -->|是| C[部署]
5
  B -->|否| D[继续开发]
6
  D --> B

1
sequenceDiagram
2
  participant User
3
  participant Astro
4
  participant Cloudflare
5
  User->>Astro: 请求 /post/hello
6
  Astro->>Cloudflare: 返回静态 HTML
7
  Cloudflare->>User: 200 OK + 缓存

1
### **交互式组件（MDX + Islands）**
2

3
> Fuwari 支持 `.mdx` 文件，可嵌入 React/Vue/Svelte 组件：
4
>
5

6
```markdown
7
---
8
// src/content/posts/demo.mdx
9
import Counter from '../../components/Counter.astro';
10
---
11

12
# 交互示例
13

14
<Counter initial={5} />
15

16
<!-- 组件按需加载，不影响首屏性能 -->

1
---
2
title: "Markdown 完全指南"
3
pubDate: 2026-04-13
4
description: "一份适配 Fuwari 的 Markdown 速查手册"
5
tags: ["markdown", "astro", "tutorial"]
6
image: "/assets/og-markdown.png"  # 用于 OG 卡片
7
draft: false  # true 时构建会跳过
8
---

1
src/content/
2
├── posts/          # 博客文章
3
│   ├── 2026-04-13-markdown-guide.md
4
│   └── hello-world.md
5
├── projects/       # 作品集（自定义集合）
6
└── config.ts       # 定义 schema 校验

1
<!-- 卡片组件 -->
2
:::tip
3
💡 这是一个提示卡片，用于强调重点内容。
4
:::
5

6
:::warning
7
⚠️ 注意：此操作不可逆，请提前备份。
8
:::
9

10
:::details 点击查看折叠内容
11
隐藏的技术细节放在这里...
12
:::

1
<!-- ✅ 推荐：用 import 引入本地图片（自动优化） -->
2
![封面](../../assets/cover.webp)
3

4
<!-- ❌ 避免：直接写 public 路径（无法自动压缩） -->
5
![封面](/assets/cover.webp)
6

7
<!-- ✅ 外部图片：加 lazy 加载 -->
8
![CDN 图](https://xxx.com/img.jpg) <!-- Astro 自动加 loading="lazy" -->