这是一个H1标题
这是一篇专门用于展示 排版装饰效果 的示例笔记。
加粗效果
普通文字中的 加粗文字 会有淡绿色渐变背景,让重点更突出。
你可以在一段话中使用多个 重点强调,它们都会有 漂亮的背景色。
斜体效果
斜体文字 使用衬线字体并带有波浪下划线,传达一种 手写笔记 的亲密感。
引用中的斜体 也同样适用这个效果
删除线效果
这是被删除的内容 使用红色批改线风格,像老师用红笔批改作业一样。
可以用来表示 错误的做法 或 已过时的信息。
高亮效果
这是高亮文字 使用荧光黄背景,非常醒目。
配合其他效果使用:加粗高亮 或 斜体高亮
二级标题装饰
二级标题下方会有一条从品牌绿渐变到透明的装饰线(48px宽)。
三级标题装饰
三级标题左侧会有一条品牌绿色的竖线,增强视觉层次感。
另一个三级标题
多个三级标题都会有这个竖线效果,让文章结构更清晰。
组合使用
在实际写作中,你可以 组合这些效果:
- 重点内容 使用加粗
- 补充说明 使用斜体
需要修正的内容使用删除线- 关键词 使用高亮
一个实际例子
学习编程最重要的是 动手实践,而不是
只看教程。 正如有人说过:「代码是写出来的,不是看出来的」
暗色模式
切换到暗色模式后,所有效果都会自动适配:
- 加粗背景变成淡薄荷绿
- 斜体波浪线变成薄荷色
- 删除线变成淡红色
Shortcode 指令演示
折叠组件
点击展开更多内容
这是折叠内容,可以包含任何 Markdown 元素:
- 列表项 1
- 列表项 2
- 列表项 3
甚至可以包含加粗和斜体文本。
分栏布局
左栏内容
这是左边的内容区域,可以放置任意 Markdown 内容。
右栏内容
这是右边的内容区域,移动端会自动堆叠。
按钮样式
绿色按钮 蓝色按钮 橙色按钮 紫色按钮 灰色按钮这就是所有的排版装饰效果!🎨
相册组件 Gallery
:::gallery 现在是一个 智能相册。它会自动识别包裹其中的图片,并根据图片的宽高比自动调整排版,确保 每一行高度一致 且完美填满空间。无需手动设置复杂参数。
1. 基础用法 (智能自动排版)
直接写 :::gallery 即可。无论图片是横是竖,系统都会自动计算出最优雅的排列方式。






注:上图中包含了一个不带感叹号的链接型图片 [[...]],系统已成功识别。
2. 极致宽屏 (width=“wide”)
如果您希望相册突破正文宽度,展示更多细节,可以加上 width="wide"。它会扩展至 760px,既美观又不会遮挡右侧目录。



3. Bento 拼贴 (layout=“bento”)
进阶模式。如果您想手动控制某张主图占据更大空间,可以使用 layout="bento" 配合别名语法 |{span=N}。



注:主图设置了 {span=2},多占了一个格子的位置。
Note这是一段描述性的文字,这是一段描述性的文字。
- 这是第一行
- 这是第二行
- 这是第三行
链接预览 Bookmark
外部链接可以显示为丰富的预览卡片:


也可以自定义标题:
支持 WikiLink 自定义图片和图标:
YouTube 视频嵌入
使用 ::youtube{url="URL"} 语法嵌入 YouTube 视频。封面图会优先加载,点击后动态加载 iframe 播放。
也可以添加自定义标题:




💬 评论