markdown 基础语法

测试 markdown 的基本语法部分以及 hexo 的支持。

标题

支持 markdown 的各级别标题，效果略。

1
2
3
4
5
# title 1
## title 2
### title 3
#### title 4
##### title 5

列表

注意必须在列表的前面空一行，否则语法解析时无法识别为列表。列表支持嵌套，包括两类列表的混合嵌套。

无序列表可以使用星号* XX、减号- XX、加号+ XX等三种样式，目前只使用减号。

  • a
  • b
  • c

有序列表可以使用两种写法：样式一，数学编号1. XX

  1. a
  2. b
  3. c
1
2
3
1. a
2. b
3. c

样式二，全 1 编号1. XX

  1. a
  2. b
  3. c
1
2
3
1. a
1. b
1. c

待办事项

大部分markdown编辑器支持checkbox样式的待办事项

1
2
- [x] TODO 1
- [ ] TODO 2

效果如下

引用

可以用> XX表示引用，支持嵌套引用> > XXX，例如

白日依山尽，黄河入海流

众里寻他千百度，慕然回首，那人却在灯火阑珊处。

注意，hexo 以及 butterfly 主题给引用设置了样式。

在 Github README，VSCode 以及 Typora 中可能还支持几种带有特殊语义的 markdown 引用，例如 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

但是测试发现 Hexo 不支持

[!NOTE] Useful information that users should know, even when skimming content.

[!TIP] Helpful advice for doing things better or more easily.

[!IMPORTANT] Key information users need to know to achieve their goal.

[!WARNING] Urgent info that needs immediate user attention to avoid problems.

[!CAUTION] Advises about risks or negative outcomes of certain actions.

字体

  • 一对星号包裹起来，表示斜体，例如*斜体*，效果为： 斜体。
  • 两对星号包裹起来，表示加粗，例如**加粗**，效果为：加粗。
  • 两对波浪号包裹起来，表示删除，例如~~删除~~，效果为：删除。

表格

支持 markdown 语法的表格，可以设置左右对齐或居中对齐。

1
2
3
4
| Tittle1 | Tittle2 | Tittle3 |
| :------ | :-----: | ------: |
| Content | Content | Content |
| Content | Content | Content |

效果如下，注意表格前后要留空行。

Tittle1 Tittle2 Tittle3
Content Content Content
Content Content Content

分割线

可以在一行中用三个或以上的星号、减号、底线来建立一个分隔线，行内不能有其他字符，但是不要求连续，中间可以含空格。例如

1
2
3
***
---
___

最好在分割线的前后各留一个空行，防止语法被错误地解析。 可以给分割线提供定制的样式，例如上文的剪刀效果就是 butterfly 主题自带的。

代码

行内的代码使用一对反引号即可（或者更多对也可以），例如printf

1
`printf`

行间的代码块需要使用三对反引号，并且建议标注语言，用于代码高亮。

1
2
3
4
5
6
#include <stdio.h>

int main(){
    printf("Hello,world!\n");
    return 0;
}

图片

可以使用标准 markdown 语法来添加图片，提供对应的 URL 即可，例如本地图片 

1
![这是一个图片的标题](/image/post_img/test_girl.jpg)

效果如下：这是一个图片的标题

除了标准的 markdown 语法的图片，同样支持 html 语法的插入图片，这种方式可以指定图片比例(如果同时设置了宽度和高度，以宽度缩放为准)

1
<img src="/image/post_img/lagrange.png" width="50%"/>

超链接

标准的 markdown 语法。

1
这是一个链接 [显示文本](https://baidu.com "浮动文本")。

效果为： 这是一个链接 显示文本。

链接中尽量避免出现空格，使用%20替代空格是标准做法。

Hexo 定制样式

测试 hexo 和 butterfly 主题提供的一些样式，这里的部分内容在其它主题中可能不支持，在博客文件中尽量避免使用。

博客内的引用

hexo 提供的引用语法为

1
{% post_link my-first-blog %}

例如这是当前的测试博客：Hexo 测试。

这种语法的好处是：不基于 URL 或者文章标题，而是基于文章的 markdown 文件名（其实是相对于_posts文件夹的相对路径，不含文件后缀），在生成时会自动替换成文章当前的标题。

Tag

hexo 支持一些 Tag，效果如下，具体样式可以在主题配置文件中修改。

default Tag

primary Tag

success Tag

info Tag

warning Tag

danger Tag

语法如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default Tag
{% endnote %}

{% note primary %}
primary Tag
{% endnote %}

{% note success %}
success Tag
{% endnote %}

{% note info %}
info Tag
{% endnote %}

{% note warning %}
warning Tag
{% endnote %}

{% note danger %}
danger Tag
{% endnote %}

自定义 Tag

hexo 的 butterfly 主题支持在 Tag 中自定义颜色和图标，语法为

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}

可选的选项包括

  • color: default / blue / pink / red / purple / orange / green
  • icon: fontawesome 图标
  • style: simple / modern / flat / disabled

默认情况会加上一个图标，可以使用 no-icon 明确没有图标，也可以在配置文件中设置默认禁用图标。

例如

你是扫微信还是支付宝

2023 年快到了....

小心行驶

这是三片呢？还是四片？

电池图标

剪刀石头布

老古董 IE 浏览器

源代码为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' modern %}
你是扫微信还是支付宝
{% endnote %}
{% note blue 'fas fa-bullhorn' modern %}
2023年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' modern %}
小心行驶
{% endnote %}
{% note red 'fas fa-fan' modern%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' modern %}
电池图标
{% endnote %}
{% note purple 'far fa-hand-scissors' modern %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' modern %}
老古董IE浏览器
{% endnote %}

选项卡

支持简单的选项卡效果，可以切换内容，效果如下：

选项卡 1

选项卡 2

选项卡 3 名字为 A

代码如下

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab，默认在第1个选项卡，如果是-1则隐藏
<!-- tab -->
**选项卡 1**
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

mermaid

butterfly 主题自带了对 mermaid 的支持，包括流程图和常见的统计图等。

1
2
3
4
5
6
7
8
{% mermaid %}
pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
{% endmermaid %}
1
2
3
4
5
6
7
8
{% mermaid %}
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
{% endmermaid %}

label

butterfly 提供的可以实现词语的颜色等简单样式

1
{% label text color %}

其中的color可选的值包括：default / blue / pink / red / purple / orange / green，默认值是灰色的。

例如：

臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍内之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。

button

按钮样式，语法比较复杂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url]         : 链接
[text]        : 按钮文字
[icon]        : [可选] 图标
[color]       : [可选] 按钮背景顔色(默认style时）
                      按钮字体和边框顔色(outline时)
                      default/blue/pink/red/purple/orange/green
[style]       : [可选] 按钮样式 默认实心
                      outline/留空
[layout]      : [可选] 按钮佈局 默认为line
                      block/留空
[position]    : [可选] 按钮位置 前提是设置了layout为block 默认为左边
                      center/right/留空
[size]        : [可选] 按钮大小
                      larger/留空

例如

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}

或者这种

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly 
1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline green larger %}
</div>

Emoji 图标

例如

  • 常见 💡⭐🐞🚀🌍🚁⚡️🌌
  • 书本 📔📕📗📘📙📒📃📜📚📖🧾
  • 动植物 🌲🌵🐳🐬🐍🐣
  • 人 🤺✍👌👈👉👆👇
  • 其他 ⚠🚩💬🔨⏰💎

提供一个查询 Emoji 的网站：https://emoji.muan.co/。

一些常用emoji 

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
✅✔️➕❌⭕️🟡
📌📍🎈🚩
⏳🌀⏰💤
⚠️🚫🚧
🔍
🔧🔨🛠️⚙️
🔗
🤖
⚡️
🧪
🚀🎉
💥🔥
✨💡⭐
🧠
🐛🪲🐞
🎯
🌱☘️🐣
🔖🏷️
🧬🧩
📖📚📕📗📘📙📒
📝📑📄📃🧾🗒️📋📜📰
✍️✏️
👈👉👆👇
🗂️🧰📦
🔐

音乐

可以在文章中嵌入一个网易云播放器（不能是会员歌曲）

代码如下，可以去网易云网页版复制外链播放器。

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe>

视频

可以嵌入 b 站的视频播放

代码如下，可以去 b 站分享中选择代码。

1
<iframe src="//player.bilibili.com/player.html?aid=938539117&bvid=BV1JT4y1r74p&cid=587958621&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

在线文档

对于网上的 PDF 文档等，直接使用 URL，例如：pdf-test，浏览器会直接缓存并在新页面打开它，对于手机端和 iPad 也是一样。

可以在 GitHub 存放文档，使用 URL，例如：README，注意如果希望在 Github 网站打开，是仓库名+blob+分支名+文件名，如果以纯文件的形式打开，需要把 blob 替换为 raw。

Latex 公式

测试

行内公式例如 \(\frac12\)，\(\frac{1}{\sqrt{1-x^2}}\)。

行间公式例如 \[ f(x) = x^2 \]

\[ g(x)=\left\{ \begin{aligned} & 1, x<1\\ & x, otherwise \end{aligned} \right. \]

\[ \begin{aligned} \frac{\partial \mathbf{u}}{\partial t} + (\mathbf{u}\cdot \nabla) \mathbf{u} &= -\nabla p + \nu \nabla^2 \mathbf{u}\\ \nabla \cdot \mathbf{u} &= 0\\ \mathbf{u}|_{\partial \Omega} &= \mathbf{u}_b\\ \mathbf{u}|_{t=0} &= \mathbf{u}_0 \end{aligned} \]

注意跨行大括号可能会渲染错误，建议避免序号。

配置

选择 MathJax 而非 Katex，前者的渲染效果还是更强。

选择基于 pandoc 的插件支持 LaTeX 公式渲染 

1
2
npm uninstall hexo-renderer-marked --save   # 卸载 marked
npm install hexo-renderer-pandoc --save     # 安装pandoc插件

注意：本地需要安装 pandoc。