这是一篇给本项目使用的手写语法速查模板。复制下面的示例即可。

Markdown 基础语法#

标题#

1
# 一级标题
2
## 二级标题
3
### 三级标题

一级标题

二级标题

三级标题

强调#

1
这是**加粗**，这是*斜体*，这是~~删除线~~。

这是加粗，这是斜体，这是~~删除线~~。

列表#

1
- 无序项 A
2
- 无序项 B
3

4
1. 有序项 1
5
2. 有序项 2

无序项 A
无序项 B

有序项 1
有序项 2

引用#

1
> 这是一段普通引用。

这是一段普通引用。

分隔线#

1
---

链接与图片#

1
[项目主页](https://github.com/suichyan/fuwari)
2

3
![示例图片](../../assets/images/banner-nacho.png)

项目主页

代码与结构#

行内代码#

1
使用 `pnpm dev` 启动开发服务器。

使用 pnpm dev 启动开发服务器。

围栏代码#

1
```bash
2
pnpm install
3
pnpm dev
4
```
5

6
```nix
7
{ config, pkgs, ... }:
8
{
9
  services.openssh.enable = true;
10
}
11
```

1
pnpm install
2
pnpm dev

1
{ config, pkgs, ... }:
2
{
3
  services.openssh.enable = true;
4
}

代码块标题#

1
```ts title="src/utils/math.ts"
2
export function add(a: number, b: number) {
3
  return a + b;
4
}
5
```

1
export function add(a: number, b: number) {
2
  return a + b;
3
}

代码块单行高亮#

1
```ts {2}
2
export function add(a: number, b: number) {
3
  return a + b;
4
}
5
```

1
export function add(a: number, b: number) {
2
  return a + b;
3
}

代码块单行加减标记#

1
```ts del={2} ins={3}
2
const oldValue = 1;
3
const newValue = 2;
4
console.log(newValue);
5
```

1
const oldValue = 1;
2
const newValue = 2;
3
console.log(newValue);

代码块多行与区间高亮#

1
```ts {1,3-4}
2
const a = 1;
3
const b = 2;
4
const c = a + b;
5
console.log(c);
6
```

1
const a = 1;
2
const b = 2;
3
const c = a + b;
4
console.log(c);

代码块行内文本高亮#

1
```ts "newValue"
2
const oldValue = 1;
3
const newValue = 2;
4
console.log(newValue);
5
```

1
const oldValue = 1;
2
const newValue = 2;
3
console.log(newValue);

代码块行内文本加减标记#

1
```ts ins="newValue" del="oldValue"
2
const oldValue = 1;
3
const newValue = 2;
4
console.log(newValue);
5
```

1
const oldValue = 1;
2
const newValue = 2;
3
console.log(newValue);

代码块行号控制#

1
```ts showLineNumbers startLineNumber=20
2
const a = 1;
3
const b = 2;
4
console.log(a + b);
5
```
6

7
```ts showLineNumbers=false
8
const hideLineNumber = true;
9
console.log(hideLineNumber);
10
```

20
const a = 1;
21
const b = 2;
22
console.log(a + b);

const hideLineNumber = true;
console.log(hideLineNumber);

代码块折叠区段#

1
```ts collapse={1-3} collapseStyle="collapsible-start"
2
import { readFileSync } from "node:fs";
3
import { join } from "node:path";
4
const fileContent = readFileSync(join(process.cwd(), "README.md"), "utf-8");
5

6
console.log(fileContent.length);
7
```


3 collapsed lines
1
import { readFileSync } from "node:fs";
2
import { join } from "node:path";
3
const fileContent = readFileSync(join(process.cwd(), "README.md"), "utf-8");
4

5
console.log(fileContent.length);

代码块框架样式覆盖#

1
```bash frame="none"
2
pnpm build
3
```

1
pnpm build

代码块文件名注释标题（自动提取）#

1
```ts
2
// src/lib/calc.ts
3
export const sum = (a: number, b: number) => a + b;
4
```

1
export const sum = (a: number, b: number) => a + b;

终端代码块标题#

1
```powershell title="终端标题示例"
2
Write-Output "这个终端窗口带标题"
3
```

1
Write-Output "这个终端窗口带标题"

ANSI 转义序列渲染#

支持通过 ANSI 转义序列在代码块中渲染彩色文本与格式。将其语言设置为 ansi 即可。

基础颜色#

支持展示标准的 ANSI 8 色及其加粗、变暗变体：

1
```ansi
2
ANSI 基础颜色:
3
- 正常: [31m红色[0m [32m绿色[0m [33m黄色[0m [34m蓝色[0m [35m洋红[0m [36m青色[0m
4
- 加粗: [1;31m红色[0m [1;32m绿色[0m [1;33m黄色[0m [1;34m蓝色[0m [1;35m洋红[0m [1;36m青色[0m
5
- 变暗: [2;31m红色[0m [2;32m绿色[0m [2;33m黄色[0m [2;34m蓝色[0m [2;35m洋红[0m [2;36m青色[0m
6
```

1
ANSI 基础颜色:
2
- 正常: 红色 绿色 黄色 蓝色 洋红 青色
3
- 加粗: 红色 绿色 黄色 蓝色 洋红 青色
4
- 变暗: 红色 绿色 黄色 蓝色 洋红 青色

256 色调色盘#

可以使用 256 色模式渲染，这里以 160 到 177 取值为例：

1
```ansi
2
256 色 (展示 160-177):
3
[38;5;160m160[0m [38;5;161m161[0m [38;5;162m162[0m [38;5;163m163[0m [38;5;164m164[0m [38;5;165m165[0m
4
[38;5;166m166[0m [38;5;167m167[0m [38;5;168m168[0m [38;5;169m169[0m [38;5;170m170[0m [38;5;171m171[0m
5
[38;5;172m172[0m [38;5;173m173[0m [38;5;174m174[0m [38;5;175m175[0m [38;5;176m176[0m [38;5;177m177[0m
6
```

1
256 色 (展示 160-177):
2
160 161 162 163 164 165
3
166 167 168 169 170 171
4
172 173 174 175 176 177

全真 RGB 颜色与文本格式化#

支持按照自定义 RGB 值渲染，以及设置文本格式，例如斜体、下划线：

1
```ansi
2
全真 RGB 颜色:
3
[38;2;34;139;34m森林绿 - RGB(34, 139, 34)[0m
4

5
文本格式化: [1m加粗[0m [2m变暗[0m [3m斜体[0m [4m下划线[0m
6
```

1
全真 RGB 颜色:
2
森林绿 - RGB(34, 139, 34)
3

4
文本格式化: 加粗 变暗 斜体 下划线

diff 风格加减写法#

1
```diff
2
+ 这行会被标记为新增
3
- 这行会被标记为删除
4
  这是一行普通内容
5
```

1
这行会被标记为新增
2
这行会被标记为删除
3
这是一行普通内容

diff 写法结合语法高亮#

1
```diff lang="js"
2
 function thisIsJavaScript() {
3
   // 保持 JS 高亮，同时支持差异标记
4
-  console.log('旧代码将被移除')
5
+  console.log('新代码已添加')
6
 }
7
```

1
function thisIsJavaScript() {
2
  // 保持 JS 高亮，同时支持差异标记
3
  console.log('旧代码将被移除')
4
  console.log('新代码已添加')
5
}

行标记标签#

1
```ts {"A":2} del={"B":3} ins={"C":4}
2
const keep = true;
3
const removeMe = false;
4
const addMe = true;
5
```

1
const keep = true;
2
const removeMe = false;
3
const addMe = true;

行内文本正则标记#

1
```ts /已[启停]用/
2
console.log('关键词“已启用”和“已停止”会被标记。');
3
```

1
console.log('关键词“已启用”和“已停用”会被标记。');

正则中转义斜杠#

1
```sh /\/home\//
2
echo "测试" > /home/test.txt
3
```

1
echo "测试" > /home/test.txt

按代码块控制自动换行#

1
```ts wrap=false
2
function 获取超长文本() {
3
  return '这是一段很长很长的文本，在容器宽度不足时更容易观察到自动换行的差异效果';
4
}
5
```

1
function 获取超长文本() {
2
  return '这是一段很长很长的文本，在容器宽度不足时更容易观察到自动换行的差异效果';
3
}

控制换行后缩进对齐#

1
```ts preserveIndent=false
2
function 获取超长文本() {
3
  return '这是一段很长很长的文本，在容器宽度不足时更容易观察到自动换行的差异效果';
4
}
5
```

1
function 获取超长文本() {
2
  return '这是一段很长很长的文本，在容器宽度不足时更容易观察到自动换行的差异效果';
3
}

表格#

1
| 命令       | 说明           |
2
| ---------- | -------------- |
3
| pnpm dev   | 启动开发服务器 |
4
| pnpm build | 构建生产版本   |

命令	说明
pnpm dev	启动开发服务器
pnpm build	构建生产版本

任务列表#

1
- [x] 已完成项
2
- [ ] 待办项

已完成项
待办项

HTML 写法（Markdown 中可直接使用）#

1
<details>
2
  <summary>点击展开</summary>
3
  这里是折叠内容。
4
</details>

点击展开

这里是折叠内容。

Markdown 进阶（通用扩展）#

数学公式（KaTeX）#

行内公式#

1
勾股定理：$a^2 + b^2 = c^2$。

勾股定理： $a^2 + b^2 = c^2$ 。

块级公式#

1
$$
2
\int_0^1 x^2\,dx = \frac{1}{3}
3
$$

\int_0^1 x^2\,dx = \frac{1}{3}

Markdown 扩展功能#

GitHub 仓库卡片#

可以通过 ::github{repo="<owner>/<repo>"} 在文章中插入动态 GitHub 仓库卡片。

1
::github{repo="saicaca/fuwari"}

saicaca

fuwari

Waiting for api.github.com...

00K

Waiting...

提示块#

支持的类型：note、tip、important、warning、caution。

基础写法#

1
:::note
2
即使快速浏览，也建议留意这条信息。
3
:::
4

5
:::tip
6
这是可选建议，能帮助你更顺利完成操作。
7
:::
8

9
:::important
10
这是关键说明，通常和正确使用方式有关。
11
:::
12

13
:::warning
14
这是风险提示，请优先确认后再执行。
15
:::
16

17
:::caution
18
该操作可能带来负面后果，请谨慎处理。
19
:::

NOTE
即使快速浏览，也建议留意这条信息。

TIP
这是可选建议，能帮助你更顺利完成操作。

IMPORTANT
这是关键说明，通常和正确使用方式有关。

WARNING
这是风险提示，请优先确认后再执行。

CAUTION
该操作可能带来负面后果，请谨慎处理。

自定义标题#

1
:::note[自定义标题]
2
这是一条带自定义标题的提示块。
3
:::

自定义标题
这是一条带自定义标题的提示块。

GitHub 风格写法#

1
> [!NOTE]
2
> 也支持 GitHub 风格的提示写法。
3

4
> [!TIP]
5
> 也支持 GitHub 风格的提示写法。

NOTE
也支持 GitHub 风格的提示写法。

TIP
也支持 GitHub 风格的提示写法。

指令语法扩展（remark-directive）#

行内指令#

1
水的化学式是 H:sub[2]O，平方写作 x:sup[2]。

水的化学式是 H₂O，平方写作 x²。

Markdown 语法

Markdown 基础语法#

标题#

一级标题

二级标题

三级标题

强调#

列表#

引用#

分隔线#

链接与图片#

代码与结构#

行内代码#

围栏代码#

代码块标题#

代码块单行高亮#

代码块单行加减标记#

代码块多行与区间高亮#

代码块行内文本高亮#

代码块行内文本加减标记#

代码块行号控制#

代码块折叠区段#

代码块框架样式覆盖#

代码块文件名注释标题（自动提取）#

终端代码块标题#

ANSI 转义序列渲染#

基础颜色#

256 色调色盘#

全真 RGB 颜色与文本格式化#

diff 风格加减写法#

diff 写法结合语法高亮#

行标记标签#

行内文本正则标记#

正则中转义斜杠#

按代码块控制自动换行#

控制换行后缩进对齐#

表格#

任务列表#

HTML 写法（Markdown 中可直接使用）#

Markdown 进阶（通用扩展）#

数学公式（KaTeX）#

行内公式#

块级公式#

Markdown 扩展功能#

GitHub 仓库卡片#

提示块#

基础写法#

自定义标题#

GitHub 风格写法#

指令语法扩展（remark-directive）#

行内指令#