【必读】当前博客文章支持语法

这里是一份「必读手册」：本博客目前支持的所有 Markdown 语法与排版效果，都汇总在这一篇里。写作时忘了格式，翻回来看一眼就好。

标题与锚点

文章正文从二级标题开始用起（文章标题已经显示在页面顶部啦）。每个标题都会自动生成锚点链接，鼠标悬停在标题上可以看到深墨色的小锚点，点击复制或跳转都很方便。

三级标题

目录（TOC）会自动从这些标题生成，层级一目了然。

四级标题

再往下还有五级、六级，不过日常写作用不到那么深：

五级标题

六级标题

文本样式

行内文本的花样都在这里了：

• 粗体文字：用 **两个星号** 包起来
• 斜体文字：用 *单个星号* 包起来
• 粗斜体：用 ***三个星号*** 包起来
• 删除线文字：用 ~~双波浪线~~ 包起来
• 行内代码：用反引号包起来，会显示成手写体
• 文字链接：手绘波浪下划线，悬停有互动效果
• 自动链接：直接写网址也会变成链接，比如 https://github.com

列表

无序列表

• 一颗星
• 两颗星
  • 缩进可以嵌套
    • 还能再嵌一层
• 三颗星

有序列表

1. 烧一壶水
2. 磨好咖啡豆
   1. 手冲 prefer 温度 92 度
   2. 水粉比 1
3. 慢慢享用

任务列表

带勾选框的任务清单，黑点会被替换成手绘风格的小勾勾，每个还带着一点随机倾斜：

• 泡一杯咖啡
• 打开手帐本
• 写完这篇文章
• 去楼下散步

引用

引用块是一张便签的样子，适合摘抄和自言自语：

慢一点，再慢一点。 把日子过成诗，把生活写成文。

引用里也可以放其他元素：

提示：引用支持嵌套

更深一层的引用，像纸条上再贴一张纸条

• 也可以放列表

提示块

四种语气的提示块，用 :::类型 包起来，颜色对应纸胶带四色（蓝 / 绿 / 黄 / 粉）：

:::info
这是一条普通的信息提示，写补充说明很合适。
:::

:::tip
小窍门：标题后面直接写文字就能自定义标题哦。
:::

:::warn
注意啦！写配置之前记得先备份原文件。
:::

:::danger
危险操作：删除命令执行前请三思。
:::

也支持自定义标题和嵌套其他语法：

:::tip 写作时的排版心得 标题后面跟的文字就是标题。提示块里可以放加粗、代码，甚至列表：

• 第一段
• 第二段 :::

分割线

三个短横线就是一条手绘波浪线，用来给文章分段落气氛：

---

表格

表格是手绘风格：虚线边框、圆角、手写体表头。对齐语法都支持：

| 语法 | 写法 | 说明 |
| :--- | :---: | ---: |
| 粗体 | `**文字**` | 左对齐 |
| 斜体 | `*文字*` | 居中对齐 |
| 删除线 | `~~文字~~` | 右对齐 |

语法	写法	说明
粗体	**文字**	左对齐
斜体	*文字*	居中对齐
删除线	~~文字~~	右对齐

代码块

代码块是重头戏：手绘纸卡、左上角彩色图钉、顶部语言或文件名徽标，右侧有收缩和复制按钮，代码本身带语法高亮。

```ts
// 普通代码块，标注语言即可高亮
export function greet(name: string): string {
  return `你好呀，${name}！`;
}
```

想展示文件名？用 语言:路径 的写法，徽标就会显示成文件名：

export function sum(a: number, b: number): number {
  return a + b;
}

其他语言也都没问题：

{
  "name": "hiprofile",
  "private": true,
  "theme": "notebook"
}

# 命令行也可以
npm run build && npx serve out -l 3000 --cors

/* 长代码块试试收缩按钮——超过 10 行会出现「展开」 */
.paper-card {
  background: #fffdf6;
  border: 2px dashed #a8a289;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(74, 70, 53, 0.08);
}
.paper-card::before {
  content: "";
  display: block;
  height: 4px;
  margin: -1rem -1.25rem 0.75rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(143, 181, 127, 0.18) 0 6px,
    transparent 6px 12px
  );
}
.paper-card:hover {
  border-color: #8fb57f;
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

图片

单张图片直接插入，点击可以放大查看（灯箱模式）：

图片网格

用 :::grid{cols=N} 把连续的图片包起来就是网格排版，N 支持 1 到 4（默认 2），窄屏会自动折成两列：

:::grid{cols=3}
![下午茶](/gallery/coffee-下午茶.svg)
![窗台上的猫](/gallery/cat-窗台上的猫.svg)
![雨天](/gallery/rainy-雨天.svg)
![黄昏](/gallery/sunset-黄昏.svg)
![晚安](/gallery/night-晚安.svg)
![小山坡](/gallery/hill-小山坡.svg)
:::

上方语法效果如下

脚注

需要补充说明时，脚注会排在文末，像页边的小批注¹，也支持带名字的写法²。

数学公式

支持 KaTeX：行内公式用单个 $ 包起来，独立公式块用双 $$。

行内公式：质能方程 $E = mc^2$ 就写在一行文字里。

独立公式块（会显示在手绘虚线卡片里，超宽可横向滚动）：

$$\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}$$ $$f(x) = \begin{cases} x + 1 & \text{if } x > 0 \\ x - 1 & \text{if } x \le 0 \end{cases}$$

Mermaid 流程图

```mermaid
graph TD
...
```

流程图渲染在一张手绘纸卡里，配色是鼠尾草绿加奶油底：

graph TD
    A[清晨醒来] --> B{今天想写点什么?}
    B -->|有灵感| C[打开手帐本]
    B -->|没有灵感| D[先泡杯咖啡]
    D --> C
    C --> E[写下第一行字]
    E --> F[慢一点，再慢一点]

时序图也一样支持：

sequenceDiagram
    participant 读者
    participant 博客
    participant 作者
    读者->>博客: 打开文章
    博客-->>读者: 呈现手帐页面
    读者->>作者: 留言鼓励
    作者-->>读者: 认真回复

视频嵌入

用 ::video 指令（两个冒号），三种用法：

贴本站媒体文件（放进 public 目录后写路径，可选 poster 封面图）：

贴 YouTube 链接，自动转成播放器：

B 站视频也是直接贴链接（示意）：

::video{src="https://www.bilibili.com/video/BV1xx411c7mD"}

音频嵌入

::audio 指令贴上音频地址即可：

---

写完这一篇，本子上的格式花样就都齐了。去写点什么吧。

Footnotes

1. 这是一条脚注，点击上面的角标可以跳到这里。 ↩

2. 带名字的脚注：[^note]，渲染时会按顺序编号。 ↩