[toc]

Obsidian 写作样式手册

本文档整理 Obsidian 写作中的常用样式规范，按实际写作场景组织章节。每个章节包含：使用时机、语法示例、渲染效果。

一、Callout 标注框

使用场景：重点提示、警告、代码注释、案例说明、引用等需要视觉突出的内容。

基础语法

> [!类型] 标题
> 内容正文

类型对照表

类型	语义	典型场景
`NOTE`	普通备注	补充说明、不影响理解的信息
`TIP`	技巧提示	更好的做法、快捷方式
`IMPORTANT`	重要提醒	不可忽视的关键信息
`WARNING`	警告	潜在风险、注意事项
`CAUTION`	警示	高风险操作、不可逆行为
`BUG`	已知缺陷	工具/库的 Bug 记录
`INFO`	信息	中性说明
`SUCCESS`	成功	执行结果、成功状态
`FAILURE`	失败	失败状态、错误场景
`ABSTRACT`	摘要	文章开头总览
`EXAMPLE`	示例	代码/操作示例
`QUOTE`	引用	名言、外部引用
`QUESTION`	疑问	待验证/待解答问题

TIP

Obsidian Callout 块内的内容支持完整 Markdown 语法，包括代码块、加粗、链接等。

示例

NOTE

这是普通备注，用于补充上下文信息。

WARNING

操作不可逆，请提前备份数据。

EXAMPLE

#include<iostream>
using namespace std;
int main(int argc, const char *argv[]){
    cout << "Hello World";
    return 0;
}

QUOTE

真正的知识来自于了解自己知道什么，也知道自己不知道什么。

概述

本文档覆盖了 Obsidian 写作中最实用的样式技巧。

二、徽章 Badge

使用场景：标注难度、标签、版本状态、技术指标等元信息。

语法

![](https://img.shields.io/badge/文本-值-颜色)

常用样式

样式参数	说明	示例
`plastic`	塑料质感
`flat`	扁平风
`flat-square`	扁平方角
`for-the-badge`	徽章风
`social`	社交风格

常用难度徽章

![难度-困难](https://img.shields.io/badge/难度-困难-red)
![难度-中等](https://img.shields.io/badge/难度-中等-yellow)
![难度-简单](https://img.shields.io/badge/难度-简单-green)

效果：

常用颜色关键词

brightgreen | green | yellowgreen | yellow | orange
red | blue | lightgrey | purple | pink

技术指标徽章

![空间复杂度](https://img.shields.io/badge/空间复杂度-O(n²)-red)
![时间复杂度](https://img.shields.io/badge/时间复杂度-O(n²)-informational)

效果：

三、交互式列表

使用场景：任务清单、操作步骤、多选项记录。Checkbox 支持 +、-、× 前缀以及自定义颜色。

Checkbox 语法

{% checkbox 纯文本 %}
{% checkbox checked, 已完成项（支持 [markdown](url)）%}
{% checkbox red, 红色提示 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加符号 %}
{% checkbox minus yellow checked, 减少符号 %}
{% checkbox times red checked, 叉号符号 %}

Radio 语法

{% radio 纯文本 %}
{% radio checked, 默认选中项 %}
{% radio red, 红色选项 %}
{% radio green, 绿色选项 %}
{% radio yellow, 黄色选项 %}
{% radio cyan, 青色选项 %}
{% radio blue, 蓝色选项 %}

NOTE
Checkbox/Radio 是 Hexo 插件语法（{% checkbox %}），在标准 Obsidian 原生环境中不渲染。Obsidian 原生支持的是：
- [ ] 未完成
- [x] 已完成
如需使用增强语法，建议配合插件（如 Templater、QuickAdd）实现。

四、颜色卡展示

使用场景：设计系统颜色对照、前端样式展示、品牌色板参考。

颜色卡语法

<div style="background:#FF5733; color:white;">#FF5733</div>
<div style="background:#33FF57;">#33FF57</div>
<div style="background:#3357FF; color:white;">#3357FF</div>

效果：

#FF5733

#33FF57

#3357FF

常用色值速查

颜色名称	色值	预览
Maroon	`maroon`	maroon
Navy	`navy`	navy
Blue	`blue`	blue
Red	`red`	red
Green	`green`	green
Yellow	`yellow`	yellow
Purple	`purple`	purple
Fuchsia	`fuchsia`	fuchsia
Aqua	`aqua`	aqua
Tomato	`tomato`	tomato
DeepSkyBlue	`deepskyblue`	deepskyblue
YellowGreen	`yellowgreen`	yellowgreen
HotPink	`hotpink`	hotpink
DarkViolet	`darkviolet`	darkviolet

五、图片嵌入

使用场景：文章配图、效果截图、流程说明。

基础语法

![](图片URL)

常用参数

![alt文本](url#left)   <!-- 左对齐 -->
![alt文本](url#center) <!-- 居中 -->
![alt文本](url#right)  <!-- 右对齐 -->
![alt文本](url#width=300) <!-- 指定宽度 -->

外链图片示例

![蓝](https://files.mdnice.com/blue.jpg)
![绿](https://files.mdnice.com/green.jpg)
![红](https://files.mdnice.com/red.jpg)

TIP

Obsidian 支持本地图片（![](附件/xxx.png)）和外部 URL 图片。推荐将文章配图存放于 res/images/ 目录，通过相对路径引用。

六、折叠区块（Details/Summary）

使用场景：大段参考信息、完整代码、备用方案等默认隐藏、需要读者主动展开的内容。

语法

<details>
    <summary>点击展开</summary>
    折叠的内容...
</details>

示例

常用 shields 颜色（点击展开）

NOTE

details / summary 是标准 HTML5 标签，Obsidian 原生渲染支持。

七、For the Badge 风格

使用场景：项目 README、技术栈声明、徽章式品牌展示。

![Made with C#](https://forthebadge.com/images/badges/made-with-c-sharp.svg)
![Uses Brains](https://forthebadge.com/images/badges/uses-brains.svg)
![Powered by Coffee](https://forthebadge.com/images/badges/powered-by-coffee.svg)
![Built by Engineers](https://forthebadge.com/images/badges/built-by-engineers.svg)

TIP

For the Badge 提供多种徽章图片，适合技术项目文档，不依赖 Shields.io 格式。

八、Emoji 完整对照表

使用场景：标题装饰、列表前缀、情感表达、状态标注。

表情符号与代码对照（按类别）

笑脸与人物	笑脸与人物	自然	动物
😄 `:smiley:`	😃 `:smile:`	☀️ `:sunny:`	🐶 `:dog:`
😆 `:laughing:`	😅 `:sweat_smile:`	🌙 `:moon:`	🐱 `:cat:`
😂 `:joy:`	🤣 `:rofl:`	⭐ `:star:`	🐭 `:mouse:`
🙂 `:slightly_smiling_face:`	🙃 `:upside_down_face:`	🌈 `:rainbow:`	🐰 `:rabbit:`
😉 `:wink:`	😊 `:blush:`	🔥 `:fire:`	🦊 `:fox:`
😍 `:heart_eyes:`	🥰 `:smiling_face_with_three_hearts:`	💧 `:droplet:`	🐻 `:bear:`
😘 `:kissing_heart:`	😗 `:kissing:`	🌊 `:ocean:`	🐼 `:panda:`
😚 `:kissing_closed_eyes:`	😋 `:yum:`	🍎 `:apple:`	🐨 `:koala:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	🍕 `:pizza:`	🦁 `:lion:`
🤑 `:money_mouth_face:`	🤗 `:hugs:`	🍔 `:hamburger:`	🐵 `:monkey_face:`
🤓 `:nerd_face:`	🤔 `:thought_balloon:`	🍟 `:fries:`	🐔 `:chicken:`
🤐 `:zipper_mouth_face:`	😐 `:neutral_face:`	🌭 `:hotdog:`	🐧 `:penguin:`
😑 `:expressionless:`	😶 `:no_mouth:`	🥪 `:sandwich:`	🐦 `:bird:`
😏 `:smirk:`	😒 `:unamused:`	🌮 `:taco:`	🐕 `:dog2:`
🙄 `:roll_eyes:`	😬 `:grimacing:`	🌯 `:burrito:`	🐩 `:poodle:`
😌 `:relieved:`	😔 `:pensive:`	🍱 `:bento:`	🐺 `:wolf:`
😪 `:sleepy:`	😴 `:sleeping:`	🍘 `:rice_cracker:`	🐗 `:boar:`
😵 `:dizzy_face:`	😷 `:mask:`	🍙 `:rice_ball:`	🐴 `:horse:`
🤒 `:face_with_thermometer:`	🤕 `:face_with_head_bandage:`	🍚 `:rice:`	🦄 `:unicorn:`
🤢 `:nauseated_face:`	🤧 `:sneezing_face:`	🍜 `:ramen:`	🐝 `:bee:`
😎 `:sunglasses:`	🤠 `:cowboy_hat_face:`	🍝 `:spaghetti:`	🐛 `:bug:`
🤡 `:clown_face:`	🤥 `:lying_face:`	🍣 `:sushi:`	🐌 `:snail:`
😈 `:smiling_imp:`	👿 `:imp:`	🍦 `:ice_cream:`	🦋 `:butterfly:`
👹 `:japanese_ogre:`	👺 `:japanese_goblin:`	🍰 `:cake:`	🐞 `:beetle:`
👻 `:ghost:`	👽 `:alien:`	🍱 `:bento:`	🐜 `:ant:`
👀 `:eyes:`	👁️ `:eye:`	🍩 `:doughnut:`	🐢 `:turtle:`
👃 `:nose:`	👅 `:tongue:`	🍪 `:cookie:`	🐍 `:snake:`
👋 `:wave:`	🤚 `:raised_back_of_hand:`	🍫 `:chocolate_bar:`	�蜥 `:lizard:`
🖐️ `:raised_hand_with_fingers_splayed:`	✋ `:raised_hand:`	🍬 `:candy:`	🐠 `:fish:`
🖖 `:vulcan_salute:`	👌 `:ok_hand:`	🍭 `:lollipop:`	🐟 `:fish:`
✌️ `:v:`	🤞 `:crossed_fingers:`	🍰 `:cake:`	🐬 `:dolphin:`
🤘 `:metal:`	🤙 `:call_me_hand:`	🍮 `:custard:`	🐳 `:whale:`
👈 `:point_left:`	👉 `:point_right:`	🍯 `:honey_pot:`	🐋 `:whale2:`
👆 `:point_up_2:`	👇 `:point_down:`	🧁 `:cupcake:`	🐟 `:fish:`
☝️ `:point_up:`	✊ `:fist:`	🍰 `:cake:`	🐡 `:blowfish:`
👊 `:facepunch:`	🤛 `:left_facing_fist:`	🍧 `:shaved_ice:`	🐠 `:tropical_fish:`
🤜 `:right_facing_fist:`	👏 `:clap:`	🍨 `:ice_cream:`	🐙 `:octopus:`
🙌 `:raised_hands:`	👐 `:open_hands:`	🍺 `:beer:`	🐚 `:shell:`
🤝 `:handshake:`	🙏 `:pray:`	🍻 `:beers:`	🐾 `:paw_prints:`

物品与符号类 Emoji

日常物品	日常物品	符号	符号
💼 `:briefcase:`	📁 `:file_folder:`	🔔 `:bell:`	💡 `:bulb:`
📎 `:paperclip:`	🗂️ `:card_file_box:`	📌 `:pushpin:`	🔒 `:lock:`
✂️ `:scissors:`	📅 `:date:`	🔑 `:key:`	🔐 `:unlock:`
📏 `:straight_rule:`	📆 `:calendar:`	🗝️ `:old_key:`	🔗 `:link:`
📐 `:triangular_ruler:`	📰 `:newspaper:`	⚙️ `:gear:`	📎 `:paperclip:`
✏️ `:pencil2:`	📓 `:notebook:`	🔧 `:wrench:`	🖊️ `:pen:`
✒️ `:black_nib:`	📔 `:notebook_with_decorative_cover:`	🔨 `:hammer:`	🖋️ `:fountain_pen:`
🖊️ `:pen:`	📒 `:ledger:`	⚔️ `:crossed_swords:`	🖌️ `:paintbrush:`
🖍️ `:crayon:`	📚 `:books:`	🔩 `:nut_and_bolt:`	🗡️ `:dagger:`
📃 `:page_with_curl:`	📖 `:book:`	🔫 `:gun:`	⚜️ `:fleur_de_lis:`
📄 `:page_facing_up:`	📗 `:green_book:`	🔪 `:hocho:`	🔱 `:trident:`
📰 `:newspaper:`	📘 `:blue_book:`	🔭 `:telescope:`	📛 `:name_badge:`
📑 `:bookmark_tabs:`	📙 `:orange_book:`	🔬 `:microscope:`	🔰 `:beginner:`
🏷️ `:label:`	📕 `:closed_book:`	🔭 `:telescope:`	⭕ `:o:`
💰 `:moneybag:`	📗 `:green_book:`	💠 `:diamond_shape_with_a_dot_inside:`	❌ `:x:`
💴 `:yen:`	📚 `:books:`	🔘 `:radio_button:`	✅ `:white_check_mark:`
💵 `:dollar:`	📜 `:scroll:`	🔳 `:white_square_button:`	☑️ `:ballot_box_with_check:`
💶 `:euro:`	📝 `:memo:`	🔲 `:black_square_button:`	❇️ `:sparkle:`
💷 `:pound:`	📋 `:clipboard:`	▪️ `:black_small_square:`	✳️ `:eight_spoked_asterisk:`
💸 `:money_with_wings:`	📁 `:file_folder:`	▫️ `:white_small_square:`	✴️ `:eight_pointed_black_star:`
💳 `:credit_card:`	🗂️ `:card_file_box:`	◾ `:black_medium_small_square:`	🆔 `:id:`
💹 `:chart:`	📂 `:open_file_folder:`	◽ `:white_medium_small_square:`	🆕 `:new:`
✨ `:sparkles:`	📃 `:page_with_curl:`	▬ `:stiff_man:`	🆗 `:ok:`
⚡ `:zap:`	📄 `:page_facing_up:`	🔷 `:large_blue_diamond:`	🆘 `:sos:`
💥 `:boom:`	📊 `:bar_chart:`	🔶 `:large_orange_diamond:`	🆙 `:up:`
💫 `:dizzy:`	📈 `:chart_with_upwards_trend:`	🔹 `:small_blue_diamond:`	🆖 `:ng:`
💨 `:dash:`	📉 `:chart_with_downwards_trend:`	🔸 `:small_orange_diamond:`	🆓 `:free:`
💦 `:sweat_droplets:`	📅 `:date:`	🔺 `:small_red_triangle:`	🆎 `:ab:`
💧 `:droplet:`	📆 `:calendar:`	🔻 `:small_red_triangle_down:`	🅰️ `:a:`
🔥 `:fire:`	📇 `:card_index:`	🔈 `:speaker_low:`	🅱️ `:b:`
💩 `:hankey:`	🗃️ `:card_file_box:`	🔉 `:speaker_medium:`	🅾️ `:o2:`
💋 `:lips:`	📅 `:date:`	🔊 `:speaker_high:`	🅿️ `:parking:`
💌 `:love_letter:`	📆 `:calendar:`	🔔 `:bell:`	🛅 `:left_luggage:`
💘 `:cupid:`	📅 `:date:`	🔕 `:no_bell:`	🛃 `:customs:`
💝 `:gift_heart:`	📓 `:notebook:`	🔇 `:mute:`	🛅 `:left_luggage:`
💞 `:revolving_hearts:`	📔 `:notebook_with_decorative_cover:`	📣 `:mega:`	🚮 `:put_litter_in_its_place:`
💓 `:heartbeat:`	📕 `:closed_book:`	📢 `:loudspeaker:`	🚰 `:potable_water:`
💗 `:heartpulse:`	📖 `:open_book:`	🔍 `:mag:`	🚹 `:mens:`
💖 `:sparkling_heart:`	📗 `:green_book:`	🔎 `:mag_right:`	🚺 `:womens:`
💘 `:cupid:`	📘 `:blue_book:`	🔬 `:microscope:`	🚼 `:baby_symbol:`
💙 `:blue_heart:`	📙 `:orange_book:`	🔭 `:telescope:`	🚾 `:wc:`
💚 `:green_heart:`	📚 `:books:`	📡 `:satellite:`	🚻 `:restroom:`
💛 `:yellow_heart:`	📜 `:scroll:`	💡 `:bulb:`	🚿 `:shower:`
💜 `:purple_heart:`	📰 `:newspaper:`	🔦 `:flashlight:`	🛁 `:bathtub:`
🖤 `:black_heart:`	📝 `:memo:`	🏧 `:atm:`	🚗 `:car:`
💔 `:broken_heart:`	📋 `:clipboard:`	💰 `:moneybag:`	🚕 `:taxi:`
❣️ `:heart_decoration:`	📁 `:file_folder:`	💲 `:heavy_dollar_sign:`	🚑 `:ambulance:`
💕 `:two_hearts:`	🗂️ `:card_file_box:`	💳 `:credit_card:`	🚒 `:fire_engine:`
💖 `:sparkling_heart:`	📂 `:open_file_folder:`	💹 `:chart:`	🚐 `:minibus:`
💗 `:heartpulse:`	📃 `:page_with_curl:`	✉️ `:envelope:`	🚚 `:truck:`
💘 `:cupid:`	📄 `:page_facing_up:`	📧 `:e-mail:`	🚓 `:police_car:`
💙 `:blue_heart:`	📑 `:bookmark_tabs:`	📨 `:incoming_envelope:`	🚔 `:oncoming_police_car:`
💚 `:green_heart:`	🏷️ `:label:`	📩 `:envelope_with_arrow:`	🚘 `:oncoming_automobile:`
💛 `:yellow_heart:`	💼 `:briefcase:`	📤 `:outbox_tray:`	🚍 `:oncoming_bus:`
💜 `:purple_heart:`	📎 `:paperclip:`	📥 `:inbox_tray:`	🚌 `:bus:`
🖤 `:black_heart:`	✂️ `:scissors:`	📦 `:package:`	🚎 `:trolleybus:`
💔 `:broken_heart:`	📏 `:straight_ruler:`	📫 `:mailbox_closed:`	🚎 `:trolleybus:`

附录：样式速查卡

Callout 类型速查

类型	关键词	颜色倾向
NOTE	备注	灰
TIP	技巧	绿
INFO	信息	蓝
WARNING	警告	黄/橙
CAUTION	警示	红
BUG	Bug	红
SUCCESS	成功	绿
FAILURE	失败	红
EXAMPLE	示例	紫
QUOTE	引用	灰
QUESTION	疑问	蓝
ABSTRACT	摘要	灰

Badge 颜色速查

色值	关键词	视觉
`brightgreen`	亮绿	🟢
`green`	绿	🟢
`yellowgreen`	黄绿	🟡🟢
`yellow`	黄	🟡
`orange`	橙	🟠
`red`	红	🔴
`blue`	蓝	🔵
`lightgrey`	浅灰	⬜
`purple`	紫	🟣
`pink`	粉	🩷

常用徽章模板

<!-- 难度 -->
![](https://img.shields.io/badge/难度-简单-green)
![](https://img.shields.io/badge/难度-中等-yellow)
![](https://img.shields.io/badge/难度-困难-red)
 
<!-- 复杂度 -->
![](https://img.shields.io/badge/时间复杂度-O(n)-brightgreen)
![](https://img.shields.io/badge/空间复杂度-O(1)-green)
 
<!-- 状态 -->
![](https://img.shields.io/badge/状态-开发中-yellowgreen)
![](https://img.shields.io/badge/状态-已完成-brightgreen)
![](https://img.shields.io/badge/状态-废弃-lightgrey)

文档信息

用途：Obsidian 写作样式参考手册
来源：原始素材整理（2026-05-07）
维护：随写作实践持续更新

tags	写作样式, obsidian, 样式手册, 前端技术/css
aliases	写作样式手册, Obsidian写作样式

小M-Quartz

探索

【手册】写作样式

Obsidian 写作样式手册

一、Callout 标注框

基础语法

类型对照表

示例

二、徽章 Badge

语法

常用样式

常用难度徽章

常用颜色关键词

技术指标徽章

三、交互式列表

Checkbox 语法

Radio 语法

四、颜色卡展示

颜色卡语法

常用色值速查

五、图片嵌入

基础语法

常用参数

外链图片示例

六、折叠区块（Details/Summary）

语法

示例

七、For the Badge 风格

八、Emoji 完整对照表

表情符号与代码对照（按类别）

物品与符号类 Emoji

附录：样式速查卡

Callout 类型速查

Badge 颜色速查

常用徽章模板

关系图谱

反向链接