这是一级标题

这是二级标题

这是三级标题

Markdown的标题等级是看”#”的个数来判断的

1
2
# Heading level 1 
## Heading level 2

代码块围栏

在代码块的前后使用三个反引号“```”或者三个波浪号“~~~”
Markdown围栏代码块

语法高亮

使用此功能，您可以为编写代码的任何语言添加颜色突出显示。要添加语法突出显示，请在受防护的代码块之前的反引号旁边指定一种语言。
Markdown高亮
效果如下

1
2
3
4
5
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Markdown段落语法

Markdown要创建段落，请使用空白行将一行或多行文本进行分隔
Markdown段落语法
段落（Paragraph）用法的最佳实
不要用空格（spaces）或制表符（ tabs）缩进段落。

Markdown换行语法

在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行。
Markdown段落语法

Markdown强调语法(字体形式)

Markdown粗体

粗体,在单词或短语的前后各添加两个星号或下划线

1
**bold text**,__bold text__

这是粗体

Markdown斜体

斜体,在单词或短语前后加一个星号或下划线

1
*bold text*,_bold text_

这是斜体

粗体和斜体

同时使用要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加三个星号或下划线。

1
***bold text***,___bold text___,

斜体加粗体

Markdown删除线

若要删除单词，请在单词前后使用两个波浪号。

1
哈哈哈,~~我被删了！~~

输出结果如下
哈哈哈,我被删了!~~

Markdown引用语法

要创建块引用，请在段落前添加一个 “>” 符号。
Markdown引用

多个段落的块引用

块引用可以包含多个段落。为段落之间的空白行添加一个 “>” 符号。
Markdown引用

嵌套块引用

块引用可以嵌套。在要嵌套的段落前添加一个 >> 符号。
Markdown引用

带有其他元素的块引用

块引用可以包含其他 Markdown 格式的元素。并非所有元素都可以使用，你需要进行实验以查看哪些元素有效
Markdown引用

Markdown列表语法

有序列表

要创建有序列表，请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始。
Markdown列表

无序列表

要创建无序列表，请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。
Markdown无序列表

任务列表语法

1
2
- [√] 吃饭了吗
- [×] 睡了没

效果如下

  • [√] 吃饭了吗
  • [×] 睡了没

定义列表

1
2
3
4
First
: 吃饱了睡
Second
:不是🐖是什么

效果如下
First
: 吃饱了睡
Second
:不是🐖是什么

在列表中嵌套其他元素

要在保留列表连续性的同时在列表中添加另一种元素，请将该元素缩进四个空格或一个制表符，如下例所示

段落

Markdown列表嵌套段落

引用块

Markdown列表嵌套引用块

代码块

代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时，请将它们缩进八个空格或两个制表符。
Markdown列表嵌套段落

图片

Markdown列表嵌套段落

列表

Markdown序嵌套段落

Markdown代码语法

反引号

要将单词或短语表示为代码,请将其包裹在反引号中”`”中
Markdown代码语法

转义反引号

如果你要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号”``”中。
Markdown转义反引号

代码块

要创建代码块，请将代码块的每一行缩进至少四个空格或一个制表符。
Markdown代码块
Note: 要创建不用缩进的代码块，请使用围栏式代码块(fenced code blocks)

Markdown分割线语法

要创建分隔线，请在单独一行上使用三个或多个星号 (*)、破折号 (—-) 或下划线 (___) ，并且不能包含其他内容。

Markdown链接语法

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。
超链接Markdown语法代码：超链接显示名

1
这是一个链接 [内容](url)

这是一个链接回到主页面。

给链接添加title

链接title是当鼠标悬停在链接上时会出现的文字，这个title是可选的，它放在圆括号中链接地址后面，跟链接地址之间以空格分隔。

1
这是一个链接[内容](url "鼠标悬停显示的内容")

这是一个链接回到主页面。

网址和email地址

用”<>”可以很方便地把url或者Email地址变成可点击的链接

1
<url>,<Email>

https://www.xyccc.wiki/
1378310726@qq.com

带格式化的链接

强调 链接, 在链接语法前后增加星号。 要将链接表示为代码，请在方括号中添加反引号。
Markdown链接语法

引用类型链接

引用样式链接是一种特殊的链接它使URL在Markdown中更易于显示和阅读。

1
[名称][url]

效果如下

Markdown 图片语法

添加图片

要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。
插入图片Markdown语法代码：

1
![图片alt](图片链接 "图片title")。

效果如下
这是图片

带链接的图片

给图片增加链接，请将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。
图片插入链接语法代码：

1
[![图片](/img/ "Shiprock")](https://markdown.com.cn)

效果如下
这是图片

Markdown表格

要添加表，请使用三个或多个连字符（—-）创建每列的标题，并使用管道（|）分隔每列,单元格宽度可以变化,呈现的输出看起来相同。

1
2
3
4
| AAA         | BBB         |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

效果如下
| AAA | BBB |
| —————- | —————- |
| Header | Title |
| Paragraph | Text |

对齐

可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号”:”，将列中的文本对齐到左侧，右侧或中心。

1
2
3
4
| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

效果如下
| Syntax | Description | Test Text |
| :—- | :——: | —-: |
| Header | Title | Here’s this |
| Paragraph | Text | And more |

Markdown转义字符语法

要显示原本用于格式化 Markdown 文档的字符，请在字符前面添加反斜杠字符”\”
转义字符

可做转义的字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

1
2
\,`,*,-,{},[],(),#,+,-,.,!,| 
\*\* 正常显示星号 \*\*

** 正常显示星号 **

Markdown脚注

脚注可以添加注释和参考,而不会使文档正文混乱,创建脚注时,带有脚注的上标数字会出现在添加脚注参考的位置,可以单击链接跳至页面底部的脚注内容
注：脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

特殊字符自动转义

…内容不好简化直接丢原链接了特殊字符自动转义

Markdown内嵌HTML标签

内嵌Html标签

Tag Plugins Plus

行内文本样式 text

  1. 带 下划线 的文本
  2. 带 着重号 的文本
  3. 带 波浪线 的文本
  4. 带 删除线 的文本
  5. 键盘样式的文本 Ctrl + V
  6. 密码样式的文本：噜噜噜噜
1
2
3
4
5
6
1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd Ctrl %} + {% kbd V %}
6. 密码样式的文本：{% psw 噜噜噜噜 %}

行内文本 span

  • 彩色文字
    红绿蓝
  • 大号字体
    哈哈哈
  1. 字体: logo, code
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 大小: small, h4, h3, h2, h1, large, huge, ultra
  4. 对齐方向: left, center, right
1
2
3
4
5
语法:
{% span 样式参数(参数以空格划分), 文本内容 %}
演示源码:
{% span red,红%}{% span green,绿%}{% span blue,蓝%}
{%span ultra,哈哈哈%}

段落文本p(配置参数跟span相同)

红色

在两个代码之间插入内容

绿色

代码内可以嵌入别的代码

蓝色

1
2
3
4
语法：
{% p 样式参数(参数以空格划分), 文本内容 %}
源码演示:
{%p red , 红色 %} 在两个代码之间插入内容 {%p green , 绿色 %} {%span yellow, 代码内可以嵌入别的代码 %} {%p blue , 蓝色 %}

上标标签 tip

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。https://fontawesome.com/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
语法:
{% tip [参数，可选] %}文本内容{% endtip %}
源码：
{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义font awesome图标{% endtip %}

复选列表 checkbox

文本测试

checked 选中状态文本

支持简单的markdown

带选中+颜色

  1. 样式: plus, minus, times
  2. 颜色: red,yellow,green,cyan,blue,gray
  3. 选中状态: checked
1
2
3
4
5
6
7
语法:
{% checkbox 样式参数（可选）, 文本（支持简单md） %}
演示原码：
{%checkbox 文本测试%}
{%checkbox checked 选中状态文本%}
{%checkbox checked ,支持简单的[markdown](https://markdown.com.cn/)%}
{%checkbox blue checked ,带选中+颜色%}

行内图片 inlineimage

这是 一段话。

  1. 高度:height = ()px
1
2
3
4
语法：
{% inlineimage 图片链接, height=高度（可选） %}
源码：
这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif , height=20px%} 一段话。

单张图片 image

  1. 添加描述：
    啊啊啊啊啊啊啊啊。
    啊啊啊啊啊啊啊啊。
  2. 指定宽度：
  3. 指定宽度并添加描述：
    啊啊啊啊啊啊啊啊。
    啊啊啊啊啊啊啊啊。
  4. 设置占位背景色：
    优化不同宽度浏览的观感
    优化不同宽度浏览的观感
  1. 图片宽度高度：width=300px, height=32px
  2. 图片描述：alt=图片描述（butterfly需要在主题配置文件中开启图片描述）
  3. 占位背景色：bg=#f2f2f2
1
2
3
4
5
6
7
8
9
10
11
语法：
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}
源码:
1. 添加描述：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=啊啊啊啊啊啊啊啊。 %}
2. 指定宽度：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}
3. 指定宽度并添加描述：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=啊啊啊啊啊啊啊啊。 %}
4. 设置占位背景色：
{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}

折叠框folding

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

假装这里有代码块（代码块没法嵌套代码块）

查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

  1. 颜色：blue, cyan, green, yellow, red
  2. 状态：状态填写 open 代表默认打开。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
语法:
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}
源码：
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}
假装这里有代码块（代码块没法嵌套代码块）
{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

分栏 tab

This is Tab 1.

This is Tab 2.

This is Tab 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Unique name :
选项卡块标签的唯一名称，不带逗号。
将在#id中用作每个标签及其索引号的前缀。
如果名称中包含空格，则对于生成#id，所有空格将由破折号代替。
仅当前帖子/页面的URL必须是唯一的！
[index]:
活动选项卡的索引号。
如果未指定，将选择第一个标签（1）。
如果index为-1，则不会选择任何选项卡。
可选参数。
[Tab caption]:
当前选项卡的标题。
如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
如果未指定标题，但指定了图标，则标题将为空。
可选参数。
[@icon]:
FontAwesome图标名称（全名，看起来像“ fas fa-font”）
可以指定带空格或不带空格；
例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
可选参数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% tabs tab%}
<!-- tab 显示效果-->
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

笔记内容参考店长的文章,只选取了自己需要的内容

糖果屋教程贴

https://akilar.top/posts/615e2dec/