Fabian备忘录

人类资格证考核中

Markdown格式

发表于 更新于 分类于
本文字数： 5k

Hexo博客要求必须使用Github风格的Markdown语言编辑。所以需要了解具体的编写格式。

一、编辑器

市面上有很多的Markdown编辑器，之前很多人喜欢用Typora，但目前这个已经没有免费版可以用了。干脆直接用VSCode。

使用VSCode需要下载两个插件，第一个是【Markdown All in One】，是一个组合包，把最常用的markdown优化都安装好；第二个是【Markdown Preview Github Styling】,是Github使用的Markdown渲染样式。使用这个样式，在本地就能预览Markdown文件最终在Github Pages中显示的效果。

二、常用语法

标题

利用#设置标题，一个表示一级，两个表示二级，依次类推 

1
2
3
#      一级标题
##     二级标题
……………… 以此类推

引用

利用>可以创建引用块

文本高亮

利用一组反引号`来把文本包起来。 

1
`这里面是需要高亮的字符`

代码块

利用三个反引号`把内容扩起来即可。在上面的那个反引号后面还可以加上语言名称来进行自适应。

斜体

可以用一组*号来把文字包起来，也可以直接用快捷键Ctrl+I。

加粗

k可以用一组**来把文字包起来，也可以用快捷键Ctrl+B。

删除线

用一组~~把文字包起来。

下划线

下划线可以用<u> </u>把文字包起来。

按键效果

可以用一组<kbd> </kbd>把文字包起来，实现按键效果。

列表

列表分为有序列表和无序列表 

1
2
3
4
5
6
7
无序列表：用-加空格
- 第一
- 第二

有序列表：用数字加.加空格
1. 第一
2. 第二

三、链接与图片

图片其实是一种超链接，所以把图片归类为链接里面。

1、跳转链接

普通的网站跳转都属于跳转链接，语法很简单： 

1
[网站说明](跳转链接)

2、图片链接

图片链接的markdown语法和跳转链接类似： 

1
![](图片链接)

3、图片存储

网上很多教程都是利用相对路径来存储图片，操作如下： 1. 安装图片插件 

1
npm install hexo-asset-image --save

  1. _config.yml配置文件中，修改为 post_asset_folder: true

其中第二步可以忽略，第二步的意义在于我们新建文章的时候，会在soruce目录下生成文章同名文件夹供我们存储图片，我们也可以手动创建文件夹。

但是对于GitPages或者云服务器来说，其提供的免费存储空间都是有上限的，这样操作只适用于图片较少的情况。我们可以利用云服务器对象存储功能实现图床。

我的域名使用的是腾讯的，那就用腾讯的COS来操作，并且腾讯提供可视化工具COSBrowser，很方便。 参考博客： Hexo 博客图片添加至图床---腾讯云COS图床使用

一个图片测试：

四、公式

公式使用的是Latex语法。但需要注意，Hexo并不支持Laxte语法，所以我们需要开启相关的开关。有些主题就自带这个功能。

Markdown使用$包裹实现行内公式，使用$$包裹实现行间公式。

Latex语法可以不掌握，借助工具即可： HostMath

不过Hexo显示数学公式还需要一些其他设置，Hexo默认使用 hexo-renderer-marked 引擎渲染网页，该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签，导致公式不显示。

五、表格

1
2
3
4
5
6
|     1   |      T2       |  T3   |
|----------|:-------------:|------:|
|   1      |  1            |  1    |
|   22     |  22           | 22    |
|   333    |  333          | 333   |

1 T2 T3
1 1 1
22 22 22
333 333 333

------表示左对齐，:------：表示居中，-----:表示右对齐 Hexo的表格必须和正文之间有空行，否则不能正常显示

六、流程图

流程图的使用参考自Hexo-Next 主题的图形工具 -- Mermaid

Mermaid 是一个支持在Markdown文档中绘制流程图、甘特图、序列图等图形的工具。它基于JavaScript实现，能够将Markdown中的元素渲染成HTML元素，从而在网页上直观地展示各种图表‌。我使用的是Next主题，所以记录Next主题中使用流程图的方式。

配置：

  • NexT config file 中找到mermaid配置，并设置为true，theme 可以设置浅色和深色背景的样式，共有4个可用选项
1
2
3
4
5
6
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: dark
    dark: dark

使用方法：mermaid与endmermaid是固定搭配，type 用于设置图形的种类，如流程图、时序图、甘特图等

1
2
{% mermaid type %}
{% endmermaid %}

也可以使用代码块的方式：

1
2
3
4
5
// 去掉前面的#
#```mermaid
type

#```

但是此时需要在 Hexo config file 中找到highlight，并添加如下内容，才会使代码块的形式生效：

1
2
3
highlight:
  exclude_languages:
    - mermaid

Flowchart

  • 用于绘制流程图，支持方向（例如从左到右、从上到下）和节点间关系的定义。
  • type 为 "graph TD"或者"graph LR"，分别表示从上到下和从左到右的方向
1
2
3
4
5
6
- 流程图方向:
  - TB - 从上到下
  - TD - 自上而下，等同于TB
  - BT - 从下到上
  - RL - 从右到左
  - LR - 从左到右

示例：

1
2
3
4
5
6
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}

效果：

            graph TD
            A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
graph TD，定义一个从上到下的流程图。
TD 是 Top to Down 的缩写，表示流程图从上向下排列。

A[Hard] -->|Text| B(Round)，定义了一个节点 A，显示为 Hard。
一个带标签的箭头 -->|Text| 指向节点 B，箭头上的标签为 Text。
节点 B 被定义为 Round，这是一个椭圆形节点。

B --> C{Decision}，节点 B 指向节点 C。
节点 C 被定义为 Decision，这是一个决策节点，用大括号 {} 表示。

C -->|One| D[Result 1]，决策节点 C 的一个分支，带标签 One，指向节点 D。
节点 D 显示为 Result 1，这是一个矩形节点。

C -->|Two| E[Result 2]，决策节点 C 的另一个分支，带标签 Two，指向节点 E。
节点 E 显示为 Result 2，也是一个矩形节点。

七、特殊字符

常见转义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
! &#33; — 惊叹号 Exclamation mark
” &#34; &quot; 双引号 Quotation mark
# &#35; — 数字标志 Number sign
$ &#36; — 美元标志 Dollar sign
% &#37; — 百分号 Percent sign
& &#38; &amp; Ampersand
‘ &#39; — 单引号 Apostrophe
( &#40; — 小括号左边部分 Left parenthesis
) &#41; — 小括号右边部分 Right parenthesis
* &#42; — 星号 Asterisk
+ &#43; — 加号 Plus sign
< &#60; &lt; 小于号 Less than
= &#61; — 等于符号 Equals sign
- &#45; &minus; — 减号
> &#62; &gt; 大于号 Greater than
? &#63; — 问号 Question mark
@ &#64; — Commercial at
[ &#91; --- 中括号左边部分 Left square bracket
\ &#92; --- 反斜杠 Reverse solidus (backslash)
] &#93; — 中括号右边部分 Right square bracket
{ &#123; — 大括号左边部分 Left curly brace
| &#124; — 竖线Vertical bar
} &#125; — 大括号右边部分 Right curly brace

八、hexo模板

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# ！！！！！！！！！！
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# ！！！！！！！！！！

title:
# 文章标题，可以为中文

date:
# 建立日期，如果自己手动添加，请按固定格式
# 就算不写，页面每篇文章顶部的发表于……也能显示
# 只要在主题配置文件中，配置了 created_at 就行
# 那为什么还要自己加上？
# 自定义文章发布的时间

updated:
# 更新日期，其它与上面的建立日期类似
# 不过在页面每篇文章顶部，是更新于……
# 在主题配置文件中，是 updated_at

permalink:
# 若站点配置文件下的 permalink 配置了 title
# 则可以替换文章 URL 里面的 title（文章标题）

categories:
# 分类，支持多级，比如：
# - technology
# - computer
# - computer-aided-art
# 则为 technology/computer/computer-aided-art
# （不适用于 layout: page）

tags:
# 标签
# 多个可以这样写 [标签1,标签2,标签3]
# （不适用于 layout: page）

description:
# 文章的描述，在每篇文章标题下方显示
# 并且作为网页的 description 元数据
# 如果不写，则自动取 <!-- more -->
# 之前的文字作为网页的 description 元数据

keywords:
# 关键字，并且作为网页的 keywords 元数据
# 如果不写，则自动取 tags 里的项
# 作为网页的 keywords 元数据

comments:
# 是否开启评论
# 默认值是 true
# 要关闭写 false

layout:
# 页面布局，默认值是 post，默认值可以在
# 站点配置文件中修改 default_layout
# 另：404 页面可能用到，将其值改为 false

type:
# categories，目录页面
# tags，标签页面
# picture，用来生成 group-pictures
# quote？
# https://io-oi.me/tech/test/

photos:
# Gallery support，用来支持画廊╱相册，用法如下：
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/test/

link:
# 文章的外部链接
# https://io-oi.me/tech/test/

image:
# 自定义的文章摘要图片，只在页面展示，文章内消失
# 此项只有参考本文 5.14 节配置好，否则请勿添加！

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好，否则请勿添加！

password:
# 文章密码，此项只有参考教程：
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节，配置好，否则请勿添加！
# 发现还是有 bug 的，就是右键在新标签中打开
# 然后无论是否输入密码，都能看到内容