模式 · PATTERN
笔记标注块 Callouts
课程笔记用 Obsidian 的语法和官方色板：老用户零学习成本，一眼分清提示、警告和完成。这是刻意的边界——笔记区是内容，不是产品界面。
本节要点
把收集、整理、输出三件事拆开做，每一步只解决一个问题。
- 收集：先存，不分类
- 整理：每周一次，按项目归档
- 输出：一篇笔记只回答一个问题
| 阶段 | 频率 | 产出 |
|---|---|---|
| 收集 | 随时 | 收件箱 |
| 整理 | 每周 | 项目笔记 |
// 围栏代码块：缩进逐字保真
function inbox(note) {
return { ...note, tags: [] }
}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>
)
}<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>/* tokens.css · 用到的令牌 */
:root {
--zzm-ink: #161616;
--zzm-text-2: #3F3F3B;
--zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
--zzm-hairline-2: rgba(0, 0, 0, 0.09);
}十三种标注块
| 类型 | 默认标题 | 色族 | 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）时降级为纯文本