Markdown 样式与组件使用指南

本文档旨在展示本博客支持的所有 Markdown 语法、GitHub 风格 Alert 以及自定义组件的使用方法。

1. 基础 Markdown 语法

标题测试

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

文本样式

加粗文本 (**bold**)
斜体文本 (*italic*)
~~删除线~~ (~~strikethrough~~)
行内代码 (`inline code`)
超链接 ([link](url))

列表

无序列表

项目一
项目二
- 子项目 A
- 子项目 B

有序列表

第一步
第二步
第三步

引用 (Blockquote)

这是一个标准的 Markdown 引用。

这是一个嵌套引用。

表格

标题 1	标题 2	标题 3
左对齐	居中对齐	右对齐
单元格	单元格	单元格

代码块

// 代码块测试
function hello() {
  console.log("Hello, World!");
}

2. GitHub 风格 Alert (Blockquote Alerts)

这些 Alert 使用标准的引用语法，但开头带有特殊的标记。

NOTE

Note: 用于强调用户在快速浏览文档时也不应忽略的重要信息。

TIP

Tip: 提供有助于用户更顺利地完成任务的建议信息。

IMPORTANT

Important: 用户为达到目标而必须了解的关键信息。

WARNING

Warning: 需要用户立即关注的关键内容，以避免出现问题。

CAUTION

Caution: 针对某些操作可能带来的负面后果的警告。

3. 自定义容器指令 (Directives)

这些指令使用 ::: 语法。

Note 容器 (`:::note`)

支持多种类型：success, info, warning, error, import。

这是一个成功 (Success) 类型的 Note。

这是一个信息 (Info) 类型的 Note。

这是一个警告 (Warning) 类型的 Note。

这是一个错误 (Error) 类型的 Note。

这是一个重要 (Import) 类型的 Note。

按钮 (`:::btn`)

支持 link 属性和多种类型。

成功按钮

信息按钮

警告按钮

错误按钮

重要按钮

4. 多媒体与布局组件

图片网格 (`:::picture`)

用于展示多张图片，会自动排列。

视频播放器 (`:::vhVideo`)

音乐播放器 (`:::vhMusic`)

支持网易云音乐等。

5. 其他特性

自动链接处理

所有外部链接都会自动添加 target="_blank" 和 rel="noopener nofollow"。

代码复制

所有代码块右上角都会自动添加复制按钮。

图片懒加载

所有图片都会自动应用懒加载处理。