---
title: 笔记标注块 Callouts
url: https://ui.zhaozimin.com/patterns/callouts/
markdown: https://ui.zhaozimin.com/patterns/callouts.md
group: 模式
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/components/v4/MarkdownNotes.jsx  # https://ui.zhaozimin.com/src/system/components/v4/MarkdownNotes.jsx
  - src/system/lib/markdown.js  # https://ui.zhaozimin.com/src/system/lib/markdown.js
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 笔记标注块 Callouts

> 课程笔记用 Obsidian 的语法和官方色板：老用户零学习成本，一眼分清提示、警告和完成。这是刻意的边界——笔记区是内容，不是产品界面。

### 样张 · 一段课程笔记

React：

```jsx
import { MarkdownNotes } from './components/v4/MarkdownNotes.jsx'

const MD = `## 本节要点

把收集、整理、输出三件事拆开做，每一步只解决一个问题。

- 收集：先存，不分类
- 整理：每周一次，按项目归档
- 输出：一篇笔记只回答一个问题

> [!note] 笔记
> 标注块语法与 Obsidian 完全一致，老用户零学习成本。

> [!tip] 技巧
> 在笔记里写 \`[跳到第 3 节](#jump:demo-3)\` 会生成朱色跳转胶囊。

> [!warning]- 注意（点我展开）
> 折叠标注块默认收起，标题后加 \`-\` 即可。

> [!success] 完成
> 看完这节，你应该能搭出自己的收件箱。

| 阶段 | 频率 | 产出 |
|---|---|---|
| 收集 | 随时 | 收件箱 |
| 整理 | 每周 | 项目笔记 |

\`\`\`js
// 围栏代码块：缩进逐字保真
function inbox(note) {
  return { ...note, tags: [] }
}
\`\`\`
`

export default function CalloutsDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 560, background: '#FFFFFF', padding: '8px 4px' }}>
      <MarkdownNotes md={MD} onJump={() => {}} />
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="width: 100%; max-width: 560px; background: #ffffff; padding: 8px 4px">
  <div style="max-width: 720px">
    <h4
      style="
        margin: 24px 0 8px;
        font-size: 15px;
        font-weight: 700;
        line-height: 24px;
        color: var(--zzm-ink, #161616);
      "
    >
      <span>本节要点</span>
    </h4>
    <p
      style="margin: 8px 0; font-size: 13.5px; line-height: 24px; color: var(--zzm-text-2, #3f3f3b)"
    >
      <span>把收集、整理、输出三件事拆开做，每一步只解决一个问题。</span>
    </p>
    <ul
      style="
        margin: 8px 0 12px;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      "
    >
      <li style="font-size: 13.5px; line-height: 24px; color: var(--zzm-text-2, #3f3f3b)">
        <span>收集：先存，不分类</span>
      </li>
      <li style="font-size: 13.5px; line-height: 24px; color: var(--zzm-text-2, #3f3f3b)">
        <span>整理：每周一次，按项目归档</span>
      </li>
      <li style="font-size: 13.5px; line-height: 24px; color: var(--zzm-text-2, #3f3f3b)">
        <span>输出：一篇笔记只回答一个问题</span>
      </li>
    </ul>
    <div
      style="
        margin: 12px 0;
        border-radius: 0 8px 8px 0;
        overflow: hidden;
        border-left: 3px solid rgb(8, 109, 221);
        background: rgba(8, 109, 221, 0.05);
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px 8px;
          cursor: default;
          user-select: auto;
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="15"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-pencil"
          aria-hidden="true"
          style="color: rgb(8, 109, 221); flex: none"
        >
          <path
            d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
          ></path>
          <path d="m15 5 4 4"></path>
        </svg>
        <span
          style="
            flex: 1;
            font-size: 13px;
            font-weight: 650;
            line-height: 20px;
            color: rgb(8, 109, 221);
          "
        >
          <span>笔记</span>
        </span>
      </div>
      <div style="padding: 0 16px 12px">
        <p
          style="
            margin: 4px 0;
            font-size: 13.5px;
            line-height: 24px;
            color: var(--zzm-text-2, #3f3f3b);
          "
        >
          <span>标注块语法与 Obsidian 完全一致，老用户零学习成本。</span>
        </p>
      </div>
    </div>
    <div
      style="
        margin: 12px 0;
        border-radius: 0 8px 8px 0;
        overflow: hidden;
        border-left: 3px solid rgb(0, 191, 188);
        background: rgba(0, 191, 188, 0.05);
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px 8px;
          cursor: default;
          user-select: auto;
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="15"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-flame"
          aria-hidden="true"
          style="color: rgb(0, 191, 188); flex: none"
        >
          <path
            d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4"
          ></path>
        </svg>
        <span
          style="
            flex: 1;
            font-size: 13px;
            font-weight: 650;
            line-height: 20px;
            color: rgb(0, 191, 188);
          "
        >
          <span>技巧</span>
        </span>
      </div>
      <div style="padding: 0 16px 12px">
        <p
          style="
            margin: 4px 0;
            font-size: 13.5px;
            line-height: 24px;
            color: var(--zzm-text-2, #3f3f3b);
          "
        >
          <span>在笔记里写</span>
          <code
            style="
              font-family: var(--zzm-mono);
              font-size: 0.88em;
              background: rgba(0, 0, 0, 0.07);
              padding: 1px 5px;
              border-radius: 4px;
              word-break: break-word;
            "
          >
            [跳到第 3 节](#jump:demo-3)
          </code>
          <span>会生成朱色跳转胶囊。</span>
        </p>
      </div>
    </div>
    <div
      style="
        margin: 12px 0;
        border-radius: 0 8px 8px 0;
        overflow: hidden;
        border-left: 3px solid rgb(236, 117, 0);
        background: rgba(236, 117, 0, 0.05);
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px;
          cursor: pointer;
          user-select: none;
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="15"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-triangle-alert lucide-alert-triangle"
          aria-hidden="true"
          style="color: rgb(236, 117, 0); flex: none"
        >
          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
          <path d="M12 9v4"></path>
          <path d="M12 17h.01"></path>
        </svg>
        <span
          style="
            flex: 1;
            font-size: 13px;
            font-weight: 650;
            line-height: 20px;
            color: rgb(236, 117, 0);
          "
        >
          <span>注意（点我展开）</span>
        </span>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevron-right"
          aria-hidden="true"
          style="
            flex: none;
            color: rgb(236, 117, 0);
            opacity: 0.7;
            transform: none;
            transition: transform 0.15s ease;
          "
        >
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </div>
    </div>
    <div
      style="
        margin: 12px 0;
        border-radius: 0 8px 8px 0;
        overflow: hidden;
        border-left: 3px solid rgb(8, 185, 78);
        background: rgba(8, 185, 78, 0.05);
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px 8px;
          cursor: default;
          user-select: auto;
        "
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="15"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-check"
          aria-hidden="true"
          style="color: rgb(8, 185, 78); flex: none"
        >
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span
          style="
            flex: 1;
            font-size: 13px;
            font-weight: 650;
            line-height: 20px;
            color: rgb(8, 185, 78);
          "
        >
          <span>完成</span>
        </span>
      </div>
      <div style="padding: 0 16px 12px">
        <p
          style="
            margin: 4px 0;
            font-size: 13.5px;
            line-height: 24px;
            color: var(--zzm-text-2, #3f3f3b);
          "
        >
          <span>看完这节，你应该能搭出自己的收件箱。</span>
        </p>
      </div>
    </div>
    <div style="margin: 12px 0; overflow-x: auto; max-width: 100%">
      <table style="border-collapse: collapse; font-size: 12.5px; min-width: 100%">
        <thead>
          <tr>
            <th
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-ink, #161616);
                vertical-align: top;
                background: rgba(0, 0, 0, 0.03);
                font-weight: 650;
                text-align: left;
                white-space: nowrap;
              "
            >
              <span>阶段</span>
            </th>
            <th
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-ink, #161616);
                vertical-align: top;
                background: rgba(0, 0, 0, 0.03);
                font-weight: 650;
                text-align: left;
                white-space: nowrap;
              "
            >
              <span>频率</span>
            </th>
            <th
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-ink, #161616);
                vertical-align: top;
                background: rgba(0, 0, 0, 0.03);
                font-weight: 650;
                text-align: left;
                white-space: nowrap;
              "
            >
              <span>产出</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-text-2, #3f3f3b);
                vertical-align: top;
                text-align: left;
              "
            >
              <span>收集</span>
            </td>
            <td
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-text-2, #3f3f3b);
                vertical-align: top;
                text-align: left;
              "
            >
              <span>随时</span>
            </td>
            <td
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-text-2, #3f3f3b);
                vertical-align: top;
                text-align: left;
              "
            >
              <span>收件箱</span>
            </td>
          </tr>
          <tr>
            <td
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-text-2, #3f3f3b);
                vertical-align: top;
                text-align: left;
              "
            >
              <span>整理</span>
            </td>
            <td
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-text-2, #3f3f3b);
                vertical-align: top;
                text-align: left;
              "
            >
              <span>每周</span>
            </td>
            <td
              style="
                border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
                padding: 8px 12px;
                font-size: 12.5px;
                line-height: 20px;
                color: var(--zzm-text-2, #3f3f3b);
                vertical-align: top;
                text-align: left;
              "
            >
              <span>项目笔记</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <pre
      style="
        margin: 12px 0;
        padding: 12px;
        border-radius: 8px;
        background: #fdfdfc;
        border: 1px solid var(--zzm-hairline-2, rgba(0, 0, 0, 0.09));
        overflow-x: auto;
        max-width: 100%;
      "
    ><code style="font-family:var(--zzm-mono);font-size:12px;line-height:20px;color:var(--zzm-text-2,#3F3F3B);white-space:pre;display:block">// 围栏代码块：缩进逐字保真
function inbox(note) {
  return { ...note, tags: [] }
}</code></pre>
  </div>
</div>
```

## 十三种标注块

| 类型 | 默认标题 | 色族 | RGB | 图标 |
|---|---|---|---|---|
| `note` | Note | blue | `8, 109, 221` | Pencil |
| `abstract` | Abstract | cyan | `0, 191, 188` | ClipboardList |
| `info` | Info | blue | `8, 109, 221` | Info |
| `todo` | Todo | blue | `8, 109, 221` | CheckCircle2 |
| `tip` | Tip | cyan | `0, 191, 188` | Flame |
| `success` | Success | green | `8, 185, 78` | Check |
| `question` | Question | yellow | `224, 172, 0` | HelpCircle |
| `warning` | Warning | orange | `236, 117, 0` | AlertTriangle |
| `failure` | Failure | red | `233, 49, 71` | X |
| `danger` | Danger | red | `233, 49, 71` | Zap |
| `bug` | Bug | red | `233, 49, 71` | Bug |
| `example` | Example | purple | `120, 82, 238` | List |
| `quote` | Quote | mono | `90, 90, 86` | Quote |

类型大小写不敏感；未知类型回落到 `note`（与 Obsidian 一致）。别名：`summary`/`tldr`→abstract，`hint`/`important`→tip，`check`/`done`→success，`help`/`faq`→question，`caution`/`attention`→warning，`fail`/`missing`→failure，`error`→danger，`cite`→quote。标题后加 `-` 默认折叠、加 `+` 默认展开。

## 还支持

标题、段落、列表（含中文顿号 `1、`）、可横向滚动的表格、**缩进逐字保真**的围栏代码块、引用、裸链接自动识别、点击放大的图片，以及 `[文字](#jump:课节ID)` 朱色跳转胶囊——点它跳到对应课节。

## 铁律

- ✓ 要：笔记区（内容）用 Obsidian 官方色
- ✗ 不要：把这些颜色带进按钮、卡片、徽章等产品界面
- ✓ 要：链接没通过白名单（safeHref）时降级为纯文本

---

上一页：[安全验证外壳](https://ui.zhaozimin.com/patterns/verify-shell.md) · 下一页：[勋章与下载](https://ui.zhaozimin.com/resources/assets.md) · 全站目录：https://ui.zhaozimin.com/llms.txt