常用的Markdown语法

Markdown工具

mac平台

收费的有:MouUlysses ⅢBear
免费的有:Cmd MarkdownTypora

Windows平台

免费的有:MarkPadCmd MarkdownTypora

这里推荐使用Cmd MarkdownTypora,这两款工具通吃Windows、mac和Linux三大平台。使用也比较方便。

标题

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

PS:# 和「一级标题」之间建议保留一个字符的空格,这是最标准的 Markdown 写法。

列表

1
2
3
- 列表一
- 列表二
- 列表三
  • 列表一
  • 列表二
  • 列表三

PS:如果希望列表有序的话,可以将‘-’换成‘1.’

1
2
3
1. 列表一
2. 列表二
3. 列表三
  1. 列表一
  2. 列表二
  3. 列表三

链接和图片

  • 在 Markdown 中,插入链接不需要其他按钮,你只需要使用`显示文本` 这样的语法即可,例如:
1
[我的博客](https://gyl-coder.github.io/)

我的博客

  • 在 Markdown 中,插入图片不需要其他按钮,你只需要使用`` 这样的语法即可,例如:
1
![](https://gyl-coder.github.io/images/avatar.png)

PS:插入图片的语法和链接的语法很像,只是前面多了一个 \!。

  • 使用HTML语法固定图片的大小
    1
    <img src="https://gyl-coder.github.io/images/avatar.png" width="100" height="100">

  • 图片加描述 居中显示
1
2
3
4
<center>
<img src="https://gyl-coder.github.io/images/avatar.png" width="100" height="100">
gyl-coder
</center>


gyl-coder
  • 增大图片和描述之间的距离
1
2
3
4
5
<center>
<img src="https://gyl-coder.github.io/images/avatar.png" width="100" height="100">
$ $
gyl-coder
</center>


$ $
gyl-coder

引用

有时候我们需要引用他人的文字,这个时候引用这个格式就很有必要了,在 Markdown中,你只需要在你希望引用的文字前面加上 > 就好了,例如:

1
> The man who has made up his mind to win will never say "impossible ".

PS:> 和文本之间要保留一个字符的空格。

The man who has made up his mind to win will never say “impossible “.

粗体 斜体

用一个 * 包含一段文本就是斜体的语法,用两个*包含一段文本就是粗体的语法,用三个*包含一段文本就是粗体+斜体

1
2
3
*gyl-coder*
**gyl-coder**
***gyl-coder***

PS:* 和文本之间没有空格

  • gyl-coder
  • gyl-coder
  • gyl-coder

代码引用

需要引用代码时,如果引用的语句只有一段,不分行,可以用`(感叹号左边的键)将语句包起来。如果引用的语句为多行,可以将```置于这段代码的首行和末行。

表格

1
2
3
4
5
| Tables        | Num           | Price  |
| ------------- |-------------:| :-----: |
| 苹果 | 20 | \$16 |
| 香蕉 | 30 | \$12 |
| 橘子 | 40 | \$15 |

显示效果:

TablesNumPrice
苹果20\$16
香蕉30\$12
橘子40\$15

分割线

在一空行上使用三个*即可


行内代码块

使用 `代码` 表示行内代码块。

示例:

让我们聊聊 html

代码块

使用 四个缩进空格 表示代码块。

示例:

这是一个代码块,此行左侧有四个不可见的空格。

标签

「标签」(Tag Plugin) 是 Hexo 提供的一种快速生成特定内容的方式。 例如,在标准 Markdown 语法中,我们无法指定图片的大小。这种情景,我们即可使用标签来解决。 Hexo 内置来许多标签来帮助写作者可以更快的书写,完整的标签列表 可以参考 Hexo 官网。 另外,Hexo 也开放来接口给主题,使主题有可能提供给写作者更简便的写作方法。 以下标签便是 NexT 主题当前提供的标签。

文本居中的引用

此标签将生成一个带上下分割线的引用,同时引用内文本将自动居中。 文本居中时,多行文本若长度不等,视觉上会显得不对称,因此建议在引用单行文本的场景下使用。 例如作为文章开篇引用 或者 结束语之前的总结引用。

使用方式

  • HTML方式:使用这种方式时,给 img 添加属性 class=”blockquote-center” 即可。
  • 标签方式:使用 centerquote 或者 简写 cq。

此标签要求 NexT 的版本在 0.4.5 或以上。 若你正在使用的版本比较低,可以选择使用 HTML 方式。

1
2
3
4
5
6
7
8
9
 <!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}
blah blah blah

blah blah blah

blah blah blah

突破容器宽度限制的图片

当使用此标签引用图片时,图片将自动扩大 26%,并突破文章容器的宽度。 此标签使用于需要突出显示的图片, 图片的扩大与容器的偏差从视觉上提升图片的吸引力。 此标签有两种调用方式(详细参看底下示例):

使用方式

  • HTML方式:使用这种方式时,为 img 添加属性 class=”full-image”即可。
  • 标签方式:使用 fullimage 或者 简写 fi, 并传递图片地址、 alt 和 title 属性即可。 属性之间以逗号分隔。

此标签要求 NexT 的版本在 0.4.5 或以上。 若你正在使用的版本比较低,可以选择使用 HTML 方式。
如果要在图片下显示图片的标题,请使用 标签方式 并给定 title 属性。

1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="full-image" 是必须的 -->
<img src="/image-url" class="full-image" />

<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}

<!-- 别名 -->
{% fi /image-url, alt, title %}

Bootstrap Callout 由 ivan-nginx 贡献

这些样式出现在 Bootstrap 的官方文档中。

使用方式

1
{% note class_name %} Content (md partial supported) {% endnote %}

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

Content Content of default bs-callout

Content Content of primary bs-callout

Content Content of success bs-callout

Content Content of info bs-callout

Content Content of warning bs-callout

Content Content of danger bs-callout

文字增加背景色块

站点配置文件
主题配置文件
站点配置文件
主题配置文件

前提是你要在themes/next/source/css/_custom下的custom.styl文件,添加属性样式

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
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}

在你需要编辑的地方。添加如下代码:

1
2
3
4
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>

添加下载按钮

打开themes/next/source/css/_custom 下的 custom.styl 文件,添加属性样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}

在你需要编辑的文章地方。放置如下代码

1
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>

Download Now

插入图像

使用 ![描述](图片链接地址) 插入图像。

示例:

我的头像

内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构。

[TOC]

删除线

使用 ~~ 表示删除线。

这是一段错误的文本。

注脚

使用 [^keyword] 表示注脚。

这是一个注脚[^footnote]的样例。

这是第二个注脚[^footnote2]的样例。

LaTeX 公式

$ 表示行内公式:

质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。

$$ 表示整行公式:

$$\sum_{i=1}^n a_i=0$$

$$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$

$$\sum^{j-1}{k=0}{\widehat{\gamma}{kj} z_k}$$

访问 MathJax 参考更多使用方法。

Html 标签

本站支持在 Markdown 语法中嵌套 Html 标签,譬如,你可以用 Html 写一个纵跨两行的表格:

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
    <table>
<tr>
<th rowspan="2">值班人员</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张明</td>
<td>王平</td>
</tr>
</table>


<table>
<tr>
<th rowspan="2">值班人员</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张明</td>
<td>王平</td>
</tr>
</table>

[^footnote]: 这是一个 注脚文本

[^footnote2]: 这是另一个 注脚文本

有收获再赞赏哦🤭
------ 本文结束感谢您的阅读-------------
0%