Markdown语法整理

搭建好博客后,贵在坚持写了,但写博客之前需要弄明白MarkDown语法,在此总结写博客时,需要做的的一些语法,也方便自己查阅。

写在前面

写文章前,我以hexo博客的样式进行说明,首先需要在你的hexo\source\_posts\文件夹下执行:

1
hexo new [layout] "postName"

其中layout是可选参数,默认值为post. 有哪些 layout 呢,请到scaffolds目录下查看,这些文件名称就是 layout 名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的 layout ,比如post的 layout 默认是hexo\scaffolds\post.md。然后pastName可自定义命名。

文章内部格式大致如下:

1
2
3
4
5
6
7
8
9
10
---
title: { { title } } #文章页面上的显示名称,可以任意修改
date: { { date } } #文章生成时间,一般不改,当然也可以任意修改
tags: #文章标签,可空。也可以按照你的习惯写分类名字,注意后面有空格,多个标签可以用[]包含,以`,`隔开
categories: #分类
permalink: #指定链接
---
这里是你博客列表显示的摘要文字
<!--more-->
以下是博客的正文,以上面的格式为分隔线

请注意,大括号与大括号之间我多加了个空格,否则会被转义,不能正常显示。

这里列表显示摘要有两种方式:

  • 一种就是采用<!--more-->,将该语句放在正文任意位置,则在它之前的正文就会作为摘要在列表显示。
  • 另一种就是采用description,本文就是采用这种方式。在标题部分加上该语法,自定义摘要内容,比如:description: "我是摘要摘要摘要~~"

MarkDown 基本语法

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。

标题

# 用于标记标题。# 的数量决定了标题的等级。标题共有 1-6 个等级:

  • H1 : # 一级标题
  • H2 : ## 二级标题
  • H3 : ### 三级标题
  • H4 : #### 四级标题
  • H5 : ##### 五级标题
  • H6 : ###### 六级标题

ps:行尾可以加上任意数量的井号字符,这些字符不会算作标题内容。通常会加上相等数量的字符以保持对称。

正文样式

❤ 超链接

1
2
①[an example](http://example.com/) -->[链接名称](网址)
②[an example](http://example.com/ "Optional Title") -->[链接名称](网址,标题)

会被解释为

1
2
<a href='http://example.com/'>an example</a>
<a href='http://example.com/' title="Optional Title">an example</a>

除了上面的行内式,也可以使用③参考式:

1
[an example][id] -->[链接名][链接代号]

然后在任意空白位置定义id这个详细链接信息:

1
[id]: http://example.com/ "Optional Title"

④自动链接:如果链接的地址和名字重复,可以用尖括号语法将其简化。

1
<http://www.izhangbo.cn>

就相当于

1
[http://example.com/](http://example.com/)

切记,大多数编辑器都会自动将符合url规则的东西视为链接,并且解释成链接。很多时候作者由于疏忽等缘故,链接和后面的中文之间缺少空格,导致链接不正常。所以我建议,链接要么加上尖括号,要么两端加上空格。

❤ 图片链接

1
2
![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional Title")

会被解释为

1
2
<img src='/path/to/img.jpg' alt='Alt text' />
<img src='/path/to/img.jpg' alt='Alt text' title='Optional Title' />

同样,图像也有类似的参考式语法。

图片图床

插入图片的地址需要图床(什么是图床呢???),这里推荐围脖图床修复计划CloudApp的服务,生成URL地址即可。 图床,顾名思义,图片床,即大量图片汇聚地,每一张图片都有一个url,供所需站点使用 推荐工具

❤ 段落

一行文字就是一个段落。比如:

1
这是一个段落。

会被解释成

1
<p>这是一个段落。</p>

如果你需要另起一段,请在两个段落之间隔一个空行。

1
2
3
这是一个段落。
这是另一个段落。

会解释成

1
2
<p>这是一个段落<p>
<p>这是另一个段落</p>

不隔一个空行的换行行为,在一些编辑器中被解释为换行,即插入一个<br />标签。对与另外一些编辑器,会被解释为插入一个空格。对于后者,若要插入换行标签,请在当前一行的结尾打两个空格。

❤ 粗体、斜体

可以使用星号*或下划线_指定粗体或者斜体。

1
2
3
4
*这是斜体*
_这也是斜体_
**这是粗体**
***这是粗体+斜体***

会被解释成

1
2
3
4
<em>这是斜体</em>
<em>这也是斜体</em>
<strong>这是粗体</strong>
<strong><em>这是粗体+斜体</strong></em>

❤ 删除线

一部分编辑器支持删除线,它不是经典markdown中的要素。用两个波浪线~~定义删除线。

1
~~这是一条删除线~~

会被解释成

1
<strike>这是一条删除线</strike>

这是一条删除线

注意:~~和被删除的文字之间不能有空格。

❤ 引用

通过在行首加上大于号>来添加引用格式。

1
2
3
4
5
6
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

引用可以嵌套:

1
2
3
4
5
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

也可以嵌套其他格式:

1
2
3
4
5
6
7
8
> ## 这是一个标题。
>
> 1. 这是第一行列表项。
> 2. 这是第二行列表项。
>
> 给出一些例子代码:
>
> return shell_exec("echo $input | $markdown_script");

❤ 列表

无序列表使用星号*加号+或是减号-作为列表标记:

1
2
3
* Red
* Green
* Blue

等同于

1
2
3
+ Red
+ Green
+ Blue

1
2
3
- Red
- Green
- Blue

有序列表则使用数字+英文句点

1
2
3
1. Bird
2. McHale
3. Parish

数字并不会影响输出的 HTML 结果,也就是说上面的例子等同于:

1
2
3
1. Bird
1. McHale
1. Parish

❤ 文字或代码标亮

对文本进行标亮:用`包围文字(` 是Tab键上面的键,和~占用同一个键,英文状态下)

1
`文字或代码`

标亮 代码 可以用来表示行内代码块。比如:让我们聊聊html

❤ 代码块

用 ```包围文字,注意段前空行.

如果在 ``` 后面更随语言名称,可以有语法高亮的效果哦.

codeBlock

❤ 分割线

你可以在一行中用三个以上的星号减号底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:

1
2
3
4
5
* * *
***
*****
- - -
---------------------------------------

❤ 表格

表格是github风格独有的语法,但近年来渐渐被大多数编辑器支持。

|表示表格纵向边界,表头和表内容用-隔开,并可用:进行对齐设置,两边都有:则表示居中,若不加:则默认左对齐。 详细说明:

  • ----:为右对齐
  • :----为左对齐
  • :---:居中对齐
  • -----默认左对齐

比如:

1
2
3
4
5
| Item | Value | Qty |
| :------- | ----: | :---: |
| Computer | $1600 | 5 |
| Phone | $12 | 12 |
| Pipe | $1 | 234 |

会被解释成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
<thead>
<tr>
<th align="left">Item</th>
<th align="right">Value</th>
<th align="center">Qty</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Computer</td>
<td align="right">$1600</td>
<td align="center">5</td>
</tr>
<tr>
<td align="left">Phone</td>
<td align="right">$12</td>
<td align="center">12</td>
</tr>
<tr>
<td align="left">Pipe</td>
<td align="right">$1</td>
<td align="center">234</td>
</tr>
</tbody></table>

要注意第二行的冒号决定了居左居右还是居中,如果你不加冒号,默认是居左的。

另外可以把第一行去掉,做成没有表头的表格,但第二行始终是要有的。

案例1:

1
2
3
4
5
| 序号 | 交易名 | 交易说明 | 备注 |
| ---: | :----: | :------- | ---- |
| 1 | prfcfg | 菜单配置 | 可以通过此交易查询到所有交易码和菜单的对应关系 |
| 2 | gentmo | 编译所有交易 | |
| 100000 | sysdba | 数据库表模型汇总 | |
序号 交易名 交易说明 备注
1 prfcfg 菜单配置 可以通过此交易查询到所有交易码和菜单的对应关系
2 gentmo 编译所有交易
100000 sysdba 数据库表模型汇总

案例2:

1
2
3
4
5
dog | bird | cat
----|------|----
foo | foo | foo
bar | bar | bar
baz | baz | baz
dog bird cat
foo foo foo
bar bar bar
baz baz baz

内联 HTML

markdown 的语法简洁,但有其局限性,所以特意保留了内联html这种方式。任何html标签及其内容,都会原样输出到结果中。也就是说,标签中的星号等作为markdown结构的符号,以及构成html标签和实体的符号,都不会做任何转义。

转义

markdown支持在以下字符前面插入反斜杠\

1
2
3
4
5
6
7
8
9
10
11
12
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

插入之后,将不再解析这些字符,而是原样输出。

MarkDown 高级语法

只有少数编辑器支持,使用前请先确认。

目录

通过[TOC]标记来插入目录。

TeX公式

内联的TeX公式使用一个美元符号标记。

1
$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

会被编译成

img

TeX公式块用独占一行的两个美元符号来标记。

1
2
3
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

会被编译成

img

如果你的编辑器不支持这个功能,可以手动解决。首先引入mathjax脚本:

1
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

之后,在需要插入公式的地方使用<script>标签包裹公式:

1
2
3
4
5
<script type="math/tex">\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N</script>
<script type="math/tex; mode=display">
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
</script>

TeX的语法参考请见这里

UML图

可以像这样来画uml时序图:

img

img

这是uml流程图:

img

img

时序图的语法请见这里。流程图的语法请见这里

脚注

在正文中可以通过添加 [^1] 这种形式的标记来表示脚注。另外,你可以不用数字而只用 ‘n’ 来标记,这样就不用担心数错数了。在文章的结尾处,你就可以定义与正文中互相匹配的脚注了。

footnote

注意:经测试注脚与注脚之间必须空一行,不然会失效。成功后会发现,即使你没有把注脚写在文末,经Markdown转换后,也会自动归类到文章的最后。

1
2
3
这是一个注脚测试[^footer1]
[^footer1]: 这是一个测试,用来阐释注脚。
在HEXO中显示没用,其他的上面又有用,我也不清楚啦

效果:

这是一个注脚测试[1]

1
2
3
[^1]: This is my first footnote
[^n]: Visit http://ghost.org
[^n]: A final footnote

锚点

网页中,锚点其实就是页内超链接,也就是链接本文档内部的某些元素,实现当前页面中的跳转。比如我这里写下一个锚点,点击回到目录,就能跳转到目录。 在目录中点击这一节,就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的。

注意:

  1. Markdown Extra 只支持在标题后插入锚点,其它地方无效。
  2. Leanote 编辑器右侧显示效果区域暂时不支持锚点跳转,所以点来点去发现没有跳转不必惊慌,但是你发布成笔记或博文后是支持跳转的。

语法描述:在你准备跳转到的指定标题后插入锚点标记},然后在文档的其它地方写上连接到锚点的链接。

1
2
## <span id=a>7. 其他</span>
跳转到[其他](#a)

跳转到其他

其他平台特有语法

Github

复选框列表

1
2
3
4
5
6
7
- [x] C
- [x] C++
- [x] Java
- [x] Qt
- [x] Android
- [ ] C#
- [ ] .NET

emoji表情

Github的Markdown语法支持添加emoji表情,输入不同的符号码(两个冒号包围的字符)可以显示出不同的表情。

​比如:blush:,可以显示 😊 更多表情符号点这里:emoji ​多来几个哈哈哈!!😒 😄😆😃☺️😜

可是Hexo却显示不出,这是为什么呢?这是因为Hexo默认的markdown渲染引擎不会渲染emoji表情,那么我们该如何做呢? 详情请看 Hexo中添加emoji表情

相关链接


  1. 这是一个测试,用来阐释注脚。 如果是网址(URL),会被自动转换为链接:

文章目录
  1. 1. 写在前面
  2. 2. MarkDown 基本语法
    1. 2.1. 标题
    2. 2.2. 正文样式
      1. 2.2.1. ❤ 超链接
      2. 2.2.2. ❤ 图片链接
      3. 2.2.3. ❤ 段落
      4. 2.2.4. ❤ 粗体、斜体
      5. 2.2.5. ❤ 删除线
      6. 2.2.6. ❤ 引用
      7. 2.2.7. ❤ 列表
      8. 2.2.8. ❤ 文字或代码标亮
      9. 2.2.9. ❤ 代码块
      10. 2.2.10. ❤ 分割线
      11. 2.2.11. ❤ 表格
    3. 2.3. 内联 HTML
    4. 2.4. 转义
  3. 3. MarkDown 高级语法
    1. 3.1. 目录
    2. 3.2. TeX公式
    3. 3.3. UML图
    4. 3.4. 脚注
    5. 3.5. 锚点
  4. 4. 其他平台特有语法
    1. 4.1. Github
      1. 4.1.1. 复选框列表
      2. 4.1.2. emoji表情
  5. 5. 相关链接
|