微尘印记
排版样式演示

这是一个H1标题

这是一篇专门用于展示 排版装饰效果 的示例笔记。

加粗效果

普通文字中的 加粗文字 会有淡绿色渐变背景,让重点更突出。

你可以在一段话中使用多个 重点强调,它们都会有 漂亮的背景色

斜体效果

斜体文字 使用衬线字体并带有波浪下划线,传达一种 手写笔记 的亲密感。

引用中的斜体 也同样适用这个效果

删除线效果

这是被删除的内容 使用红色批改线风格,像老师用红笔批改作业一样。

可以用来表示 错误的做法已过时的信息

高亮效果

这是高亮文字 使用荧光黄背景,非常醒目。

配合其他效果使用:加粗高亮斜体高亮

二级标题装饰

二级标题下方会有一条从品牌绿渐变到透明的装饰线(48px宽)。

三级标题装饰

三级标题左侧会有一条品牌绿色的竖线,增强视觉层次感。

另一个三级标题

多个三级标题都会有这个竖线效果,让文章结构更清晰。

组合使用

在实际写作中,你可以 组合这些效果

  • 重点内容 使用加粗
  • 补充说明 使用斜体
  • 需要修正的内容 使用删除线
  • 关键词 使用高亮

一个实际例子

学习编程最重要的是 动手实践,而不是 只看教程正如有人说过:「代码是写出来的,不是看出来的

暗色模式

切换到暗色模式后,所有效果都会自动适配:

  • 加粗背景变成淡薄荷绿
  • 斜体波浪线变成薄荷色
  • 删除线变成淡红色

Shortcode 指令演示

折叠组件

点击展开更多内容

这是折叠内容,可以包含任何 Markdown 元素:

  • 列表项 1
  • 列表项 2
  • 列表项 3

甚至可以包含加粗斜体文本。

分栏布局

左栏内容

这是左边的内容区域,可以放置任意 Markdown 内容。

右栏内容

这是右边的内容区域,移动端会自动堆叠。

按钮样式

绿色按钮 蓝色按钮 橙色按钮 紫色按钮 灰色按钮

这就是所有的排版装饰效果!🎨

:::gallery 现在是一个 智能相册。它会自动识别包裹其中的图片,并根据图片的宽高比自动调整排版,确保 每一行高度一致 且完美填满空间。无需手动设置复杂参数。

1. 基础用法 (智能自动排版)

直接写 :::gallery 即可。无论图片是横是竖,系统都会自动计算出最优雅的排列方式。

注:上图中包含了一个不带感叹号的链接型图片 [[...]],系统已成功识别。

2. 极致宽屏 (width=“wide”)

如果您希望相册突破正文宽度,展示更多细节,可以加上 width="wide"。它会扩展至 760px,既美观又不会遮挡右侧目录。

3. Bento 拼贴 (layout=“bento”)

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

注:主图设置了 {span=2},多占了一个格子的位置。


✏️
Note

这是一段描述性的文字,这是一段描述性的文字。

  1. 这是第一行
  2. 这是第二行
  3. 这是第三行

链接预览 Bookmark

外部链接可以显示为丰富的预览卡片:

Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
Astro
Astro
GitHub - remarkjs/remark-directive: remark plugin to support directives
remark plugin to support directives. Contribute to remarkjs/remark-directive development by creating an account on GitHub.
GitHub
GitHub - remarkjs/remark-directive: remark plugin to support directives

也可以自定义标题:

微尘印记 - 首页
记录生活与思考
微尘印记
微尘印记 - 首页

支持 WikiLink 自定义图片和图标:

Jacks Blog
享受激情,享受自由。
Jacks Blog

YouTube 视频嵌入

使用 ::youtube{url="URL"} 语法嵌入 YouTube 视频。封面图会优先加载,点击后动态加载 iframe 播放。

也可以添加自定义标题:

Me at the zoo - YouTube 第2233一个视频在 YouTube 上观看

纵向卡片展示

横向卡片展示

💬 评论

    输入关键词开始搜索