本文展示 Craft UI 主题支持的全部短代码，直接在文章中使用即可自动渲染。
一、文本标注
手绘下划线 -- 像笔在纸上画的线
高亮标记 -- 荧光笔效果
半高亮 -- 更含蓄的强调
圈注文字 -- 老师批改式圆圈
方框标注 -- 方框框住重点
删除线效果 -- 手绘删除线
括号强调 -- 方括号包裹
波浪下划线 -- 活泼的波浪线
二、提示框
Info
这是信息提示，适合补充说明背景知识。
Warning
这是警告提示，提醒读者注意潜在风险。
Success
这是成功提示，表示操作已顺利完成。
Error
这是错误提示，告知出现了问题需要处理。
Note
这是备注提示，提供额外的参考信息。
三、标签
默认标签 主要 次要 强调 警告 危险 成功
描边风格：默认描边 主要描边 强调描边 警告描边
分类标签：# JavaScript # CSS # 设计系统 # 前端开发
四、徽章
v2.0 新功能 Beta 开发中 热门
五、键盘按键
Ctrl + C 复制 / Ctrl + V 粘贴 / Ctrl + Z 撤销
Cmd + Shift + P 命令面板 / Esc 关闭
六、行内代码
使用 npm install 安装依赖，运行 npm run dev 启动开发，配置文件在 vite.config.ts。
七、代码块
JAVASCRIPT
hello.js
function greet(name) {
const msg = 你好，${name}！;
console.log(msg);
return msg;
}
greet('世界');
CSS
theme.css
.hand-drawn-card {
background: #fffdf7;
border: 2px solid #3d3229;
filter: url(#hand-drawn);
border-radius: 3px;
}
八、引用
最好的设计是你注意不到的设计。不完美正是让它感觉富有人情味的原因。
简约不是少，而是没有多余。足够也不是多，而是刚好你需要。
九、折叠面板
一套手绘风格的博客设计系统，使用纯 CSS、JS 和 SVG 构建，通过 SVG 滤镜让页面元素呈现自然的手绘质感。
直接在文章编辑器中输入短代码即可，发布后自动渲染为对应的样式组件。
支持 Chrome、Firefox、Safari、Edge 等所有现代浏览器。
十、进度条
十一、按钮
主要按钮描边按钮次要按钮强调按钮危险按钮幽灵按钮十二、任务清单
- 主题基础框架搭建
- 手绘风格 SVG 滤镜
- 短代码解析系统
- 暗色模式支持
- 完整使用文档
十三、提示气泡
把鼠标放到 这段文字我是顶部提示气泡 上试试。
也支持 底部方向我是底部提示 的提示。
十四、图片
十五、分割线
以上就是全部短代码。自由组合使用，让博客内容更加丰富。
嵌套回复