Markdown与外挂标签

Markdown语法和外挂标签

1 Markdown语法自带格式

1.1 快捷键

功能	快捷键
加粗	Ctrl + B
斜体	Ctrl + I
引用	Ctrl + Q
插入链接	Ctrl + L
插入代码	Ctrl + K
插入图片	Ctrl + G
提升标题	Ctrl + H
有序列表	Ctrl + O
无序列表	Ctrl + U
横线	Ctrl + R
撤销	Ctrl + Z
重做	Ctrl + Y

1.2 Markdown 标题语法

要创建标题，请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>) (例如：### My Header)。

Markdown语法	HTML	预览效果
# Heading level 1	<h1>Heading level 1</h1>	Heading level 1
## Heading level 2	<h2>Heading level 2</h2>	Heading level 2
### Heading level 3	<h3>Heading level 3</h3>	Heading level 3
#### Heading level 4	<h4>Heading level 4</h4>	Heading level 4
##### Heading level 5	<h5>Heading level 5</h5>	Heading level 5
###### Heading level 6	<h6>Heading level 6</h6>	Heading level 6

1.2.1 可选语法

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 — 号来标识二级标题。

Markdown语法	HTML	预览效果
Heading level 1===============	<h1>Heading level 1</h1>	Heading level 1
Heading level 2---------------	<h2>Heading level 2</h2>	Heading level 2

1.3 Markdown 段落

要创建段落，请使用空白行将一行或多行文本进行分隔。

Markdown语法	HTML	预览效果
I really like using Markdown.I think I'll use it to format all of my documents from now on.	<p>I really like using Markdown.</p><p>I think I'll use it to format all of my documents from now on.</p>	I really like using Markdown.I think I’ll use it to format all of my documents from now on.

1.4 Markdown 强调语法

通过将文本设置为粗体或斜体来强调其重要性。

1.4.1 粗体（Bold）

要加粗文本，请在单词或短语的前后各添加两个星号（asterisks）或下划线（underscores）。如需加粗一个单词或短语的中间部分用以表示强调的话，请在要加粗部分的两侧各添加两个星号（asterisks）。

Markdown语法	HTML	预览效果
I just love **bold text**.	I just love <strong>bold text</strong>.	I just love bold text.
I just love __bold text__.	I just love <strong>bold text</strong>.	I just love bold text.
Love**is**bold	Love<strong>is</strong>bold	Loveisbold

1.4.2 斜体（Italic）

要用斜体显示文本，请在单词或短语前后添加一个星号（asterisk）或下划线（underscore）。要斜体突出单词的中间部分，请在字母前后各添加一个星号，中间不要带空格。

Markdown语法	HTML	预览效果
Italicized text is the *cat's meow*.	Italicized text is the <em>cat's meow</em>.	Italicized text is the cat’s meow.
Italicized text is the _cat's meow_.	Italicized text is the <em>cat's meow</em>.	Italicized text is the cat’s meow.
A*cat*meow	A<em>cat</em>meow	Acatmeow

1.5 Markdown 引用语法

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

> 哈哈哈哈哈哈

渲染效果如下所示：

哈哈哈哈哈哈哈哈哈哈哈哈

1.6 Markdown 列表语法

1.6.1 有序列表

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

1. First item
2. Second item
3. Third item
4. Fourth item

1.6.2 无序列表

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

• First item
• Second item
• Third item
• Fourth item

1.7 Markdown 分隔线语法

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

1.8 Markdown 链接语法

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。

超链接Markdown语法代码：[超链接显示名](超链接地址 "超链接title")

1.9 Markdown 图片语法

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

插入图片Markdown语法代码：![图片alt](图片链接 "图片title")。

对应的HTML代码：<img src="图片链接" alt="图片alt" title="图片title">

1.10 Markdown 转义字符语法

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

字符	名字
\	反斜杠
`	反引号
*	星号
_	下划线
{ }	花括号
[ ]	方括号
( )	圆括号
#	英镑符号
+	加号
-	减号
.	句点
!	感叹号
\		竖线

1.11 Markdown 内嵌 HTML 标签

对于 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 本身。如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可。

1.11.1 行级內联标签

HTML 的行级內联标签如 <span>、<cite>、<del> 不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用 Markdown 格式，而采用 HTML 标签来格式化。例如：如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时（例如为文本指定颜色或更改图像的宽度），使用 HTML 标签更方便些。

HTML 行级內联标签和区块标签不同，在內联标签的范围内， Markdown 的语法是可以解析的。

This **word** is bold. This <em>word</em> is italic.

如：hhh，hhhhhhhh

1.11.2 区块标签

区块元素──比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行，以便于内容区分。而且这些元素的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素，避免在区块标签前后加上没有必要的 <p> 标签。

例如，在 Markdown 文件里加上一段 HTML 表格：

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

请注意，Markdown 语法在 HTML 区块标签中将不会被进行处理。例如，你无法在 HTML 区块内使用 Markdown 形式的*强调*。

1.11.3 HTML 用法最佳实践

出于安全原因，并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。如有疑问，请查看相应 Markdown 应用程序的手册。某些应用程序只支持 HTML 标签的子集。

对于 HTML 的块级元素 <div>、<table>、<pre> 和 <p>，请在其前后使用空行（blank lines）与其它内容进行分隔。尽量不要使用制表符（tabs）或空格（spaces）对 HTML 标签做缩进，否则将影响格式。

在 HTML 块级标签内不能使用 Markdown 语法。例如 <p>italic and **bold**</p> 将不起作用。

2 Butterfly外挂标签

这部分参考Fomalhaut🥝:基于Butterfly的外挂标签引入

2.1 行内文本样式 text

• 标签语法

markdown
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd 文本内容 %}
{% psw 文本内容 %}

2.2 行内文本 span

• 标签语法

markdown
{% span 样式参数(参数以空格划分), 文本内容 %}

2.3 段落文本p

• 标签语法

markdown
{% p 样式参数(参数以空格划分), 文本内容 %}

2.4 引用note

• 通用配置

markdown

note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

2.5 上标标签 tip

• 标签语法

markdown
{% tip [参数，可选] %}文本内容{% endtip %}

2.6 动态标签 anima

• 示例源码

markdown
{% tip [参数，可选] %}文本内容{% endtip %}

2.7 复选列表 checkbox

• 标签语法

markdown
{% checkbox 样式参数（可选）, 文本（支持简单md） %}

2.8 单选列表 radio

• 标签语法

markdown
{% radio 样式参数（可选）, 文本（支持简单md） %}

2.9 时间轴 timeline

• 标签语法

markdown
{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}

2.10 链接卡片 link

• 标签语法

markdown
{% link 标题, 链接, 图片链接（可选） %}

2.11 按钮 btns

• 标签语法

markdown
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

2.12 github卡片 ghcard

• 标签语法

markdown
{% ghcard 用户名, 其它参数（可选） %}
{% ghcard 用户名/仓库, 其它参数（可选） %}

2.13 github徽标 ghbdage

• 标签语法

markdown
{% bdage [right],[left],[logo]||[color],[link],[title]||[option] %}

2.14 网站卡片 sites

• 标签语法

markdown
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}

2.15 行内图片 inlineimage

• 标签语法

markdown
{% inlineimage 图片链接, height=高度（可选） %}

2.16 单张图片 image

• 标签语法

markdown
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

2.17 音频 audio

• 标签语法

markdown
{% audio 音频链接 %}

2.18 视频 video

• 标签语法

markdown
{% video 视频链接 %}

2.19 相册 gallery

• 标签语法

1.gallerygroup 相册图库

markdown
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

2.gallery 相册

markdown
{% gallery %}
markdown 圖片格式
{% endgallery %}

2.20 折叠框 folding

• 标签语法

1.gallerygroup 相册图库

markdown
{% folding 参数（可选）, 标题 %}
![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

1. 颜色：blue, cyan, green, yellow, red
2. 状态：状态填写 open 代表默认打开。

2.21 分栏 tab

• 标签语法

markdown
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

2.22 诗词标签 poem

• 参数配置

2.23 阿里图标 icon

• 标签语法

markdown
{% icon [icon-xxxx],[font-size] %}

2.24 特效标签wow

• 示例源码

markdown
{% wow [animete],[duration],[delay],[offset],[iteration] %}
内容
{% endwow %}

2.25 进度条 progress

进度条标签参考沂佰孜猫-给HEXO文章添加彩色进度条。
源样式提取自Cuteen主题。

• 参数配置

markdown
{% progress [width] [color] [text] %}

2.26 注释 notation

• 标签语法

markdown
{% nota [label] , [text] %}

2.27 气泡注释 bubble

• 标签语法

markdown
{% bubble [content] , [notation] ,[background-color] %}

2.28 引用文献 reference

• 标签语法

markdown
{% referto [id] , [literature] %}
{% referfrom [id] , [literature] , [url] %}

2.29 PDF展示

• 标签语法

markdown
{% pdf 文件路径 %}

2.30 Hexo-tag-map 插件

• 标签语法

markdown
{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %}

2.31 隐藏块

• 标签语法

markdown
{% hideBlock display,bg,color %}
content
{% endhideBlock %}