全文约 1,296 字，读完约 4 分钟
最近把博客的写作流程换了一套：后台多了一个独立的 Markdown 写作页，左边写 Markdown，右边实时预览，保存的时候自动转成 HTML 存进文章。
对我这种「正文里经常要插提示框、按钮、折叠块」的写法，比在编辑器里一块块拖要顺手得多。这篇就把这套东西支持的组件全部过一遍，顺便当一份速查表，以后自己忘了也回来翻。
下面每一段都是真实渲染结果，不是截图。你在这页看到的样式，就是文章发出去之后的样子。
一、基础 Markdown 照常
平时怎么写还怎么写，没有额外负担：
- 粗体、斜体、
删除线、行内代码 - 有序列表、无序列表
- 引用、代码块、表格、分割线
引用块留给别人的话，或者一句想让人停下来的结论。
| 写法 | 效果 |
|---|---|
**文字** |
文字 |
~~文字~~ |
|
`代码` | 代码 |
// 代码块标了语言就有高亮
function hello($name) {
return 'hello, ' . $name;
}二、提示类
标注
橙色标注，用来强调正文里最该被看见的那句话。
换成蓝色也没问题，color 里直接写十六进制色值就行。
提示条
提醒框
三、进度与清单
进度条
72%
任务清单
打通后台保存接口
补齐暗色模式样式
写一份使用说明
时间轴
四、容器
折叠
点我展开：折叠里能放什么？
任何 Markdown 都能放——列表、代码块，甚至别的组件。编译是由内向外做的，所以嵌套多少层都不怕。
选项卡
工具栏点一下就插入一对标签，中间填内容。
纯 CSS 的 radio + label 方案，不依赖 JS，也没兼容性雷。
想加几个加几个，标签名写在 label 里。
卡片面板
把一段相对独立的内容包起来，视觉上和正文分开一档。
五、布局
宫格
宫格一
第一行说明
宫格二
第二行说明
宫格三
第三行说明
卡片列表
登录可见
六、装饰
按钮组
单个按钮也行：
居中标题
装饰标题（带竖线）
七、内嵌
B站视频
直接粘视频地址就行，BV 号和分P会自动抠出来：
页面内嵌
需要把别的页面框进来的时候用它，高度可以直接写 360 或者 50vh：
八、实在不够用，还有原生 HTML
三个感叹号之间写什么都行，Markdown 解析器不会碰它：
—— 原生 HTML 块，写啥都得 ——
—
小结
100%
组件就这些。写的时候不用背语法，工具栏点一下就插入一对标签，中间填内容；保存时 Markdown 转成 HTML 存进文章，源文另外存一份，下次打开接着改，不用跟 HTML 打交道。
在写这篇文章的时候，我已经把这个插件更新到了1.0.8最新版😏我太强了
赞！
谢谢๑•́₃•̀๑
你好，我是倦意，在做一个小项目：博客汇（https://bkh.jyblog.com），一个通过 RSS 汇集独立博客文章的聚合站。
我读了你的博客，觉得内容很好，已经先把你的博客收录进来了，展示页面在这里：https://bkh.jyblog.com/members/146
网站只展示标题和摘要，读者点击会直接跳转到你的原博客。如果你不希望被收录，或者想调整展示的博客名称、头像等信息，可以进行博客认领自行修改，或者随时告诉我，我会立刻处理。
冒昧打扰，希望没有给你造成困扰。也欢迎你看看网站，提提建议