博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

互动

最近评论

暂无评论

标签

寻找感兴趣的领域

暂无标签

功能

深色模式

标签

JavaScript¹² TypeScript⁸ React¹⁵ Next.js⁶ Vue¹⁰ Node.js⁷ CSS⁵ 前端²⁰

互动

最近评论

暂无评论

标签

寻找感兴趣的领域

暂无标签

功能

深色模式

标签

JavaScript¹² TypeScript⁸ React¹⁵ Next.js⁶ Vue¹⁰ Node.js⁷ CSS⁵ 前端²⁰

随便逛逛

博客分类

文章标签

复制地址

深色模式

博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

互动

最近评论

暂无评论

标签

寻找感兴趣的领域

暂无标签

功能

深色模式

标签

JavaScript¹² TypeScript⁸ React¹⁵ Next.js⁶ Vue¹⁰ Node.js⁷ CSS⁵ 前端²⁰

Anheyu Markdown编辑器

文章介绍多种Markdown扩展组件的用法，涵盖标签页（基础+指定默认激活）、折叠框（默认收起/展开、自定义颜色）、隐藏内容（块级/行内+自定义按钮文字/颜色）、按钮（多样式/尺寸/布局）、按钮组（自定义列数/卡片样式）、媒体（图片组、视频画廊、网易云音乐播放器）、行内样式（下划线、着重号等）、基础文本（标题、带参数图片、对齐表格）、数学公式（行内/块级）、Mermaid图表、提示框（!!!语法）、付费内容（基础/自定义）、链接卡片（基础/自定义图标）等，每个组件含基础及自定义参数示例。

December 30, 202513 分钟阅读50 次阅读

一、🦄 标签页（Tabs）

基础用法

const hello = "Hello World";
console.log(hello);

const hello: string = "Hello World";
console.log(hello);

vue

<template>
  <div>{{ hello }}</div>
</template>
<script setup>
const hello = "Hello World";
</script>

例子

== tab JavaScript
```js
const hello = "Hello World";
console.log(hello);
```
== tab TypeScript
```ts
const hello: string = "Hello World";
console.log(hello);
```
== tab Vue
```vue
<template>
  <div>{{ hello }}</div>
</template>
<script setup>
const hello = "Hello World";
</script>
```

指定默认激活标签（active=标签索引，从1开始）

内容 1

内容 2（默认激活）

内容 3

例子

:::tabs active=2
== tab 第一个标签
内容 1
== tab 第二个标签
内容 2（默认激活）
== tab 第三个标签
内容 3
:::

二、📁折叠框（Folding）

基础用法（默认收起）

折叠框标题

这是折叠框的内容，默认是收起状态。
支持 Markdown 语法。

例子

:::folding
折叠框标题
这是折叠框的内容，默认是收起状态。
支持 **Markdown** 语法。
:::

默认展开（添加open参数）

默认展开的折叠框

这个折叠框默认是展开状态。

例子

:::folding open
默认展开的折叠框
这个折叠框默认是展开状态。
:::

自定义颜色（十六进制颜色值）

粉色折叠框

使用十六进制颜色值自定义边框和标题背景色。

例子

:::folding #FF6B9D
粉色折叠框
使用十六进制颜色值自定义边框和标题背景色。
:::

组合参数（展开+自定义颜色）

绿色折叠框（默认展开）

同时设置展开状态和自定义颜色。

例子

:::folding open #42b983
绿色折叠框（默认展开）
同时设置展开状态和自定义颜色。
:::

三、🙈隐藏内容（Hidden）

块级隐藏内容（默认按钮文字）

例子

:::hidden
这是默认的隐藏内容，点击"查看隐藏内容"按钮后显示。
支持 **Markdown** 语法。
:::

自定义按钮文字（display参数）

例子

:::hidden display=点击查看答案
这是一道题目的答案。
:::

自定义按钮颜色（bg=背景色，color=文字色）

例子

:::hidden display=查看彩蛋 bg=#FF6B9D color=#fff
这是一个彩蛋内容！
:::

行内隐藏内容（{hide}标签）

这是一段文字，这部分内容被隐藏了，点击按钮查看。

例子

这是一段文字，{hide display=查看}这部分内容被隐藏了{/hide}，点击按钮查看。

四、🔘按钮（Button）

基础按钮（url=链接，text=按钮文字）

访问博客

例子

{btn url=https://blog.anheyu.com text=访问博客}{/btn}

自定义图标（icon=图标名称）

GitHub

例子

{btn url=https://github.com text=GitHub icon=anzhiyu-icon-github}{/btn}

按钮颜色（color参数：blue/pink/red/purple/orange/green）

蓝色按钮
 粉色按钮

例子

{btn url=# text=蓝色按钮 color=blue}{/btn}
{btn url=# text=粉色按钮 color=pink}{/btn}
{btn url=# text=红色按钮 color=red}{/btn}

描边样式（style=outline）

描边按钮

例子

{btn url=# text=描边按钮 style=outline color=blue}{/btn}

更大尺寸（size=larger）

大按钮

例子

{btn url=# text=大按钮 size=larger color=blue}{/btn}

块级布局（layout=block，position=对齐方式）

块级按钮

居中按钮

右对齐按钮

例子

{btn url=# text=块级按钮 layout=block}{/btn}
{btn url=# text=居中按钮 layout=block position=center}{/btn}
{btn url=# text=右对齐按钮 layout=block position=right}{/btn}

五、🎯按钮组（Btns）

基础用法

例子

:::btns
icon=anzhiyu-icon-shapes title=张三 url=https://example.com desc=前端工程师
icon=anzhiyu-icon-shapes title=李四 url=https://example.com desc=后端工程师
icon=anzhiyu-icon-shapes title=王五 url=https://example.com desc=UI 设计师
:::

自定义列数（cols=1-6）

例子

:::btns cols=4
- icon=anzhiyu-icon-github title=GitHub url=https://github.com desc=代码托管平台
- icon=anzhiyu-icon-twitter title=Twitter url=https://twitter.com desc=社交媒体平台
- icon=anzhiyu-icon-bilibili title=Bilibili url=https://bilibili.com desc=视频分享网站
- icon=anzhiyu-icon-wechat title=微信 url=# desc=即时通讯工具
:::

按钮颜色

例子

:::btns cols=3
- icon=anzhiyu-icon-shapes title=蓝色成员 url=# desc=前端开发 color=blue
- icon=anzhiyu-icon-shapes title=粉色成员 url=# desc=设计师 color=pink
- icon=anzhiyu-icon-shapes title=绿色成员 url=# desc=后端开发 color=green
:::

卡片样式

支持的样式：default、card、simple

卡片样式

使用卡片风格

例子

:::btns style=card
- icon=anzhiyu-icon-shapes title=卡片样式 url=# desc=使用卡片风格展示
- icon=anzhiyu-icon-shapes title=卡片样式 url=# desc=使用卡片风格展示
:::

参数说明
容器参数：cols（列数 1-6，默认 3）、style（default/card/simple）

按钮参数：
icon：图标（必需），支持 AnZhiYu 图标、Iconify 图标、图片 URL
title：标题（必需）
url：链接地址
desc：描述文字
color：颜色（blue/pink/red/purple/orange/green）

六、🖼️图片组（Gallery）

基础用法（默认3列）

风景1

风景2

风景3

例子

:::gallery
![图片1](https://example.com/image1.jpg "风景1")
![图片2](https://example.com/image2.jpg "风景2")
![图片3](https://example.com/image3.jpg "风景3")
:::

自定义列数

默认为 3 列，可以设置 1-6 列：

宽屏风景

宽屏建筑

宽屏风景

宽屏建筑

例子

:::gallery cols=4
![图片1](url1 "标题1")
![图片2](url2 "标题2")
![图片3](url3 "标题3")
![图片4](url4 "标题4")
:::

设置图片间距

图片1

图片2

图片3

例子

:::gallery gap=20px
![图片1](url1)
![图片2](url2)
![图片3](url3)
:::

自定义列数+宽高比

宽屏风景

宽屏建筑

例子

:::gallery cols=2 ratio=16:9
![宽屏图1](https://example.com/image3.jpg "宽屏风景")
![宽屏图2](https://example.com/image4.jpg "宽屏建筑")
:::

常用宽高比：
1:1 正方形
16:9 宽屏
4:3 传统屏幕
3:2 照片常用比例

参数说明

容器参数：cols（列数 1-6，默认 3）、gap（间距，默认 10px）、ratio（宽高比，如 16:9）
图片格式：使用标准 Markdown 图片语法 ![alt](url "title")

七、视频画廊（Video Gallery）

基础用法

武汉风光1

武汉风光2

例子

:::video-gallery
url=https://example.com/video1.mp4 title=武汉风光1
url=https://example.com/video2.mp4 title=武汉风光2
:::

带封面图+描述

教程视频

详细教程说明

例子

:::video-gallery
url=https://example.com/video1.mp4 title=教程视频 poster=https://example.com/cover1.jpg desc=详细教程说明
:::

八、音乐播放器（Music Player）

基础用法（网易云歌曲ID）

我的名字

焦迈奇

00:00 / 00:00

例子

{music id=554241732}{/music}

多首歌曲列表

我的名字

焦迈奇

00:00 / 00:00

我记得

赵雷

00:00 / 00:00

例子

{music id=554241732}{/music}
{music id=1974443814}{/music}

九、行内样式

下划线（{u}）

这是下划线文字
彩色下划线

例子

{u}这是下划线文字{/u}
{u color=#FF6B9D}彩色下划线{/u}

着重号（{emp}）

这是着重号文字
彩色着重号

例子

{emp}这是着重号文字{/emp}
{emp color=#42b983}彩色着重号{/emp}

波浪线（{wavy}）

这是波浪线文字

例子

{wavy}这是波浪线文字{/wavy}

键盘样式（{kbd}）

按 Ctrl + S 保存

例子

按 {kbd}Ctrl{/kbd} + {kbd}S{/kbd} 保存

十、基础文本格式

标题（#分级）

h1标题

h2标题

例子

# h1标题
## h2标题

图片（带参数）

例子

![](https://example.com/image.jpg){caption="底部描述" width=800 align=center}

表格（支持对齐）

表头1	表头2
左对齐	右对齐

例子

| 表头1 | 表头2 |
| :----- | -----: |
| 左对齐 | 右对齐 |

十一、数学公式

行内公式（$包裹）

$x+y^{2x}$

块级公式（$$包裹）

x3\sqrt[3]{x}

例子

行内公式：$x+y^{2x}$
块级公式：
$$
\sqrt[3]{x}
$$

十二、图表（Mermaid）

gitGraph commit branch develop checkout develop commit

例子

```mermaid
gitGraph
   commit
   branch develop
   checkout develop
   commit
```

十三、提示框（!!!语法）

成功提示

操作完成！

警告提示

请注意风险！

例子

!!! success 成功提示
操作完成！
!!!

!!! warning 警告提示
请注意风险！
!!!

十四、付费内容（PRO）

基础用法

自定义标题+价格

例子

:::paid-content
:::

十五、链接卡片（LinkCard）

基础用法

引用站外地址

安知鱼

AnZhiYu

自定义图标

引用站外地址

GitHub

网站名称

例子

{linkcard url=https://blog.anheyu.com title=安知鱼 sitename=AnZhiYu}{/linkcard}

{linkcard url=https://github.com title=GitHub icon=anzhiyu-icon-github}{/linkcard}

十六、提示框（Tip，PRO）

点击触发+成功主题

点击查看

右侧显示+延迟

右侧提示

例子

{tip text=点击查看 content=操作成功 theme=success trigger=click}{/tip}

{tip text=右侧提示 content=显示在右侧 position=right delay=500}{/tip}

互动

最近评论

暂无评论

标签

寻找感兴趣的领域

暂无标签

功能

深色模式

标签

JavaScript¹² TypeScript⁸ React¹⁵ Next.js⁶ Vue¹⁰ Node.js⁷ CSS⁵ 前端²⁰

随便逛逛

博客分类

文章标签

复制地址

深色模式

Anheyu Markdown编辑器

December 30, 202513 分钟阅读50 次阅读

一、🦄 标签页（Tabs）

基础用法

const hello = "Hello World";
console.log(hello);

const hello: string = "Hello World";
console.log(hello);

vue

<template>
  <div>{{ hello }}</div>
</template>
<script setup>
const hello = "Hello World";
</script>

例子

== tab JavaScript
```js
const hello = "Hello World";
console.log(hello);
```
== tab TypeScript
```ts
const hello: string = "Hello World";
console.log(hello);
```
== tab Vue
```vue
<template>
  <div>{{ hello }}</div>
</template>
<script setup>
const hello = "Hello World";
</script>
```

指定默认激活标签（active=标签索引，从1开始）

内容 1

内容 2（默认激活）

内容 3

例子

:::tabs active=2
== tab 第一个标签
内容 1
== tab 第二个标签
内容 2（默认激活）
== tab 第三个标签
内容 3
:::

二、📁折叠框（Folding）

基础用法（默认收起）

折叠框标题

这是折叠框的内容，默认是收起状态。
支持 Markdown 语法。

例子

:::folding
折叠框标题
这是折叠框的内容，默认是收起状态。
支持 **Markdown** 语法。
:::

默认展开（添加open参数）

默认展开的折叠框

这个折叠框默认是展开状态。

例子

:::folding open
默认展开的折叠框
这个折叠框默认是展开状态。
:::

自定义颜色（十六进制颜色值）

粉色折叠框

使用十六进制颜色值自定义边框和标题背景色。

例子

:::folding #FF6B9D
粉色折叠框
使用十六进制颜色值自定义边框和标题背景色。
:::

组合参数（展开+自定义颜色）

绿色折叠框（默认展开）

同时设置展开状态和自定义颜色。

例子

:::folding open #42b983
绿色折叠框（默认展开）
同时设置展开状态和自定义颜色。
:::

三、🙈隐藏内容（Hidden）

块级隐藏内容（默认按钮文字）

例子

:::hidden
这是默认的隐藏内容，点击"查看隐藏内容"按钮后显示。
支持 **Markdown** 语法。
:::

自定义按钮文字（display参数）

例子

:::hidden display=点击查看答案
这是一道题目的答案。
:::

自定义按钮颜色（bg=背景色，color=文字色）

例子

:::hidden display=查看彩蛋 bg=#FF6B9D color=#fff
这是一个彩蛋内容！
:::

行内隐藏内容（{hide}标签）

这是一段文字，这部分内容被隐藏了，点击按钮查看。

例子

这是一段文字，{hide display=查看}这部分内容被隐藏了{/hide}，点击按钮查看。

四、🔘按钮（Button）

基础按钮（url=链接，text=按钮文字）

访问博客

例子

{btn url=https://blog.anheyu.com text=访问博客}{/btn}

自定义图标（icon=图标名称）

GitHub

例子

{btn url=https://github.com text=GitHub icon=anzhiyu-icon-github}{/btn}

按钮颜色（color参数：blue/pink/red/purple/orange/green）

蓝色按钮
 粉色按钮

例子

{btn url=# text=蓝色按钮 color=blue}{/btn}
{btn url=# text=粉色按钮 color=pink}{/btn}
{btn url=# text=红色按钮 color=red}{/btn}

描边样式（style=outline）

描边按钮

例子

{btn url=# text=描边按钮 style=outline color=blue}{/btn}

更大尺寸（size=larger）

大按钮

例子

{btn url=# text=大按钮 size=larger color=blue}{/btn}

块级布局（layout=block，position=对齐方式）

块级按钮

居中按钮

右对齐按钮

例子

{btn url=# text=块级按钮 layout=block}{/btn}
{btn url=# text=居中按钮 layout=block position=center}{/btn}
{btn url=# text=右对齐按钮 layout=block position=right}{/btn}

五、🎯按钮组（Btns）

基础用法

例子

:::btns
icon=anzhiyu-icon-shapes title=张三 url=https://example.com desc=前端工程师
icon=anzhiyu-icon-shapes title=李四 url=https://example.com desc=后端工程师
icon=anzhiyu-icon-shapes title=王五 url=https://example.com desc=UI 设计师
:::

自定义列数（cols=1-6）

例子

:::btns cols=4
- icon=anzhiyu-icon-github title=GitHub url=https://github.com desc=代码托管平台
- icon=anzhiyu-icon-twitter title=Twitter url=https://twitter.com desc=社交媒体平台
- icon=anzhiyu-icon-bilibili title=Bilibili url=https://bilibili.com desc=视频分享网站
- icon=anzhiyu-icon-wechat title=微信 url=# desc=即时通讯工具
:::

按钮颜色

例子

:::btns cols=3
- icon=anzhiyu-icon-shapes title=蓝色成员 url=# desc=前端开发 color=blue
- icon=anzhiyu-icon-shapes title=粉色成员 url=# desc=设计师 color=pink
- icon=anzhiyu-icon-shapes title=绿色成员 url=# desc=后端开发 color=green
:::

卡片样式

支持的样式：default、card、simple

卡片样式

使用卡片风格

例子

:::btns style=card
- icon=anzhiyu-icon-shapes title=卡片样式 url=# desc=使用卡片风格展示
- icon=anzhiyu-icon-shapes title=卡片样式 url=# desc=使用卡片风格展示
:::

参数说明
容器参数：cols（列数 1-6，默认 3）、style（default/card/simple）

六、🖼️图片组（Gallery）

基础用法（默认3列）

风景1

风景2

风景3

例子

:::gallery
![图片1](https://example.com/image1.jpg "风景1")
![图片2](https://example.com/image2.jpg "风景2")
![图片3](https://example.com/image3.jpg "风景3")
:::

自定义列数

默认为 3 列，可以设置 1-6 列：

宽屏风景

宽屏建筑

宽屏风景

宽屏建筑

例子

:::gallery cols=4
![图片1](url1 "标题1")
![图片2](url2 "标题2")
![图片3](url3 "标题3")
![图片4](url4 "标题4")
:::

设置图片间距

图片1

图片2

图片3

例子

:::gallery gap=20px
![图片1](url1)
![图片2](url2)
![图片3](url3)
:::

自定义列数+宽高比

宽屏风景

宽屏建筑

例子

:::gallery cols=2 ratio=16:9
![宽屏图1](https://example.com/image3.jpg "宽屏风景")
![宽屏图2](https://example.com/image4.jpg "宽屏建筑")
:::

常用宽高比：
1:1 正方形
16:9 宽屏
4:3 传统屏幕
3:2 照片常用比例

参数说明

容器参数：cols（列数 1-6，默认 3）、gap（间距，默认 10px）、ratio（宽高比，如 16:9）
图片格式：使用标准 Markdown 图片语法 ![alt](url "title")

七、视频画廊（Video Gallery）

基础用法

武汉风光1

武汉风光2

例子

:::video-gallery
url=https://example.com/video1.mp4 title=武汉风光1
url=https://example.com/video2.mp4 title=武汉风光2
:::

带封面图+描述

教程视频

详细教程说明

例子

:::video-gallery
url=https://example.com/video1.mp4 title=教程视频 poster=https://example.com/cover1.jpg desc=详细教程说明
:::

八、音乐播放器（Music Player）

基础用法（网易云歌曲ID）

我的名字

焦迈奇

00:00 / 00:00

例子

{music id=554241732}{/music}

多首歌曲列表

我的名字

焦迈奇

00:00 / 00:00

我记得

赵雷

00:00 / 00:00

例子

{music id=554241732}{/music}
{music id=1974443814}{/music}

九、行内样式

下划线（{u}）

这是下划线文字
彩色下划线

例子

{u}这是下划线文字{/u}
{u color=#FF6B9D}彩色下划线{/u}

着重号（{emp}）

这是着重号文字
彩色着重号

例子

{emp}这是着重号文字{/emp}
{emp color=#42b983}彩色着重号{/emp}

波浪线（{wavy}）

这是波浪线文字

例子

{wavy}这是波浪线文字{/wavy}

键盘样式（{kbd}）

按 Ctrl + S 保存

例子

按 {kbd}Ctrl{/kbd} + {kbd}S{/kbd} 保存

十、基础文本格式

标题（#分级）

h1标题

h2标题

例子

# h1标题
## h2标题

图片（带参数）

例子

![](https://example.com/image.jpg){caption="底部描述" width=800 align=center}

表格（支持对齐）

表头1	表头2
左对齐	右对齐

例子

| 表头1 | 表头2 |
| :----- | -----: |
| 左对齐 | 右对齐 |

十一、数学公式

行内公式（$包裹）

$x+y^{2x}$

块级公式（$$包裹）

x3\sqrt[3]{x}

例子

行内公式：$x+y^{2x}$
块级公式：
$$
\sqrt[3]{x}
$$

十二、图表（Mermaid）

gitGraph commit branch develop checkout develop commit

例子

```mermaid
gitGraph
   commit
   branch develop
   checkout develop
   commit
```

十三、提示框（!!!语法）

成功提示

操作完成！

警告提示

请注意风险！

例子

!!! success 成功提示
操作完成！
!!!

!!! warning 警告提示
请注意风险！
!!!

十四、付费内容（PRO）

基础用法

自定义标题+价格

例子

:::paid-content
:::

十五、链接卡片（LinkCard）

基础用法

引用站外地址

安知鱼

AnZhiYu

自定义图标

引用站外地址

GitHub

网站名称

例子

{linkcard url=https://blog.anheyu.com title=安知鱼 sitename=AnZhiYu}{/linkcard}

{linkcard url=https://github.com title=GitHub icon=anzhiyu-icon-github}{/linkcard}

十六、提示框（Tip，PRO）

点击触发+成功主题

点击查看

右侧显示+延迟

右侧提示

例子

{tip text=点击查看 content=操作成功 theme=success trigger=click}{/tip}

{tip text=右侧提示 content=显示在右侧 position=right delay=500}{/tip}