笔记样式速查手册

本页把本博客支持的所有美化效果都演示一遍，每一节「先给可复制的源码，再给实际效果」，以后写笔记直接抄这里。

原理：Markdown 里可以直接写 HTML（主题已开启 html:true），加上几个 markdown-it 插件和主题自带的样式类，就能实现下面这些效果。

1. 行内文字

==高亮文字==
**加粗**　*斜体*　`行内代码`　~~删除线~~
<span class="hl-y">黄</span> <span class="hl-g">绿</span> <span class="hl-b">蓝</span> <span class="hl-r">红</span> <span class="hl-p">粉</span>
<span class="key">主题色强调</span>
<span class="gradient-text">渐变文字</span>

效果：高亮文字　加粗　斜体　行内代码　删除线
黄 绿 蓝 红 粉　主题色强调　渐变文字

2. 徽标 / 标签 chip

默认 绿 蓝 红 默认 绿 蓝 红 粉

效果：默认 绿 蓝 红 粉

3. Callout 提示框

写法：<div> 开标签后空一行，就能在里面正常写 Markdown。类型：tip（绿）/note（蓝）/warn（橙）/danger（红）/key（紫）。

💡 **提示**：这是一条绿色提示，里面可以写 **Markdown**、`代码`、[链接](/)。

效果：

4. 折叠块（点击展开）

原生 <details>，特别适合「先问题后答案」。

<details>
<summary>点击查看答案</summary>

这里是折叠起来的内容，支持 **Markdown**。

</details>

效果：

5. 卡片

卡片标题
一段描述文字。


第二张
自动换行排版，鼠标悬停有浮起效果。

效果：

6. 时间线

2025.01 - 至今
海外 AI 创业公司 · AI 平台后端


2022.01 - 2024.12
上海集度汽车 · 研发效能平台

效果：

7. 表格（自带斑马纹 + 主题色表头）

| 组件 | 写法 | 场景 |
|------|------|------|
| 提示框 | `.callout` | 强调一段内容 |
| 折叠块 | `<details>` | 问答、长内容 |
| 卡片 | `.cards` | 并列展示 |

效果：

8. 引用块

> 这是一段引用，左侧有主题色竖条、浅色背景。
> 适合摘录、金句、原文。

效果：

这是一段引用，左侧有主题色竖条、浅色背景。
适合摘录、金句、原文。

9. 代码块（Prism 语法高亮）

async def retrieve(query: str) -> list[Doc]:
    hits = await vector_store.search(query, top_k=10)
    return rerank(query, hits)

效果：

async def retrieve(query: str) -> list[Doc]:
    hits = await vector_store.search(query, top_k=10)
    return rerank(query, hits)

10. 任务清单

- [x] 已完成的事项
- [ ] 待办事项

效果：

• 已完成的事项
• 待办事项

11. 数学公式（KaTeX）

行内：$E = mc^2$

独立：
$$
\text{Attention}(Q,K,V) = \text{softmax}\left(\frac{QK^\top}{\sqrt{d_k}}\right)V
$$

效果：行内 $E = mc^2$

$\text{Attention}(Q,K,V) = \text{softmax}\left(\frac{QK^\top}{\sqrt{d_k}}\right)V$

12. 图片 + 图注

<figure>
<img src="/image/header/xxx.jpg" alt="示意图">
<figcaption>图 1：这是图片说明文字</figcaption>
</figure>

效果：居中、圆角、带阴影，下方是灰色小字图注。（把 src 换成你自己的图片路径）

13. 定义列表

RAG
: 检索增强生成，先检索相关文档再喂给大模型。

MCP
: Model Context Protocol，标准化工具/资源接入协议。

效果：

RAG

检索增强生成，先检索相关文档再喂给大模型。

MCP

Model Context Protocol，标准化工具/资源接入协议。

14. 分隔符

一行 --- 就是一条分隔线（本页每节之间用的就是它）。

以上所有效果在深色 / 浅色模式下都会自动适配配色，直接抄用即可。