markdown基础语法

这篇文章总结markdown基础语法,便于后续查找和使用。另有一篇next-markdown技巧和模板总结了博客写作中常用的markdown技巧和模板,有些并不是原生的markdown语法,但是写作效果很好看,需要的时候可以查阅这个。

markdown特性

  • Markdown 的目标是实现易读易写
  • 兼容HTML,不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写,不需要额外标注这是 HTML 或是 Markdown,只要直接加标签就可以了,不过有一些标签需要特殊注意
  • 特殊字符转换:特殊字符如HTML中需要特殊处理的字符<&,markdown会将其自动转化为&lt;&amp;这种实体的形式(虽然在markdown中看不到,但是实际上在生成html时markdown自动将其转化为上述实体的形式),但是如果是把 < 符号作为 HTML 标签的定界符使用,那 Markdown 不会对它做任何转换。附上HTML 中有用的字符实体
  • 在markdown使用HTML标签需要特殊注意的是 HTML 的区块元素,比如 <div><table><pre><p> 等标签,必须在前后加上空行与其它内容区隔开,还要求它们的开始标签与结尾标签不能用制表符或空格来缩进;Markdown 的生成器有足够智能,不会在 HTML 区块标签外加上不必要<p> 标签
  • HTML 区块标签间的 Markdown 格式语法将不会被处理,如<p>这是**一个**测试</p>中一个不会加粗显示
  • HTML 的行内标签如 <span><cite><del> 可以在 Markdown 的段落、列表或是标题里随意使用
  • 与处在 HTML 区块标签间不同,Markdown 语法在 HTML 行内标签间是有效的
  • 具体的HTML区块标签和行内标签有哪些,请参考这篇转载的文章

基础语法

区块元素

换行和段落

在markdown中进行换行操作:一行文本末尾增加两个以上的空格然后回车,如果只使用回车,不添加或者没加够空格看上去两行的文字会变为一行

markdown区分段落的关键是:这两行文字之间是否有空行,空行的定义是显示上看起来像是空的,便会被视为空行。比如,若某一行只包含空格和制表符,则该行也会被视为空行。如果这两行文字之间有空行,就代表这两行文字为两个段落,如果这两行文字之间没有空行,仅仅使用另个以上空格加回车进行换行,这两行文字仍旧是属于同一个段落。

  • 得到空行的方法:在上一行文本末尾加上两个以上空格然后回车再加上<br />即可
  • 两个段落之间有一个空行就可以证明其为两个段落,再多的空行也不会在html中渲染(上述添加<br />制造空行的方式除外,增加几个<br />就会有几个空行)。

标题

markdown依据#的数量,支持六级的标题,一个#代表一级标题,用于标题的#数目最多为6个,当数目大于6个时不再以标题的形式显现,如####### 7将直接显示为####### 7,而不是以标题的形式。


当然也可以选择闭合标题的#,在标题之后加上若干数目的#,标题的级别是依据标题之前的#数目决定,和之后的#数目无关。如# 1 ##########还是代表的1级标题。


区块引用 Blockquotes

  • markdown使用>进行引用
  • 段落内多行一同进行区块引用可以在每一行之前都加上>,也可以进行偷懒,在整个段落的第一行加上>引用一整行
  • 引用可以进行嵌套,如加两个>>三个>>>

这是一句引用

这也是一个引用

当然,这个还是一个引用

  • 使用blockquotes标签进行引用,可以修改文字颜色以及左边框颜色。
1
<blockquote style="color:red;border-left: 3px solid #F44336;">使用blockquotes标签进行引用</blockquote>

效果如下:

使用blockquotes标签进行引用
  • 引用的区块内也可以使用其他的 Markdown 语法,包括标题、列表、代码区块等
1
2
3
4
5
6
7
> #### 这是一个标题
>
> 1. 这是第一行列表项
> 2. 这是第二行列表项
>
> <blockquote style="color:red;border-left: 3px solid #F44336;">使用blockquotes标签进行引用</blockquote>
> **引用**结束

列表

markdown支持有序列表无序列表任务列表

无序列表

无序列表使用星号加号或是减号作为列表标记。

1
2
3
*   Red
* Green
* Blue

等同于:

1
2
3
+   Red
+ Green
+ Blue

也等同于:

1
2
3
-   Red
- Green
- Blue
有序列表

有序列表则使用数字接着一个英文句点作为列表标记。值得注意的是有序列表中英文句号前面的数字并不重要,也就是说可以是完全相同或者不连续的数字,这些都不会影响最终解析得到的html信息,得到的结果都是相同的

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

等同于:

1
2
3
1.  Bird
1. McHale
1. Parish
任务列表

依赖模块: pymdownx.tasklist

用法: - [ ]- [x],其中 [ ]表示不打勾[x]表示打勾-可以用+*替代

1
2
3
4
5
6
7
8
9
10
- [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
- [x] Nulla lobortis egestas semper
- [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
- [ ] Vestibulum convallis sit amet nisi a tincidunt
- [x] In hac habitasse platea dictumst
- [x] In scelerisque nibh non dolor mollis congue sed et metus
- [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
- [ ] Praesent sed risus massa
- [x] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
- [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi

最终效果:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Nulla lobortis egestas semper
  • Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
  • Vestibulum convallis sit amet nisi a tincidunt
    • In hac habitasse platea dictumst
    • In scelerisque nibh non dolor mollis congue sed et metus
    • Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
    • Praesent sed risus massa
  • Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
  • Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
多级列表

多级列表的产生:先得到一级列表,然后使用tab键将后续的列表依次缩进即可得到多级列表。

1
2
3
* this is a test 
* this is a test
* this is a test

最终效果:

  • this is a test
    • this is a test
      • this is a test
包含段落的列表

列表项目可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符

段落的每一行都可以进行缩进

1
2
3
4
5
6
7
8
9
1.  This is a list item 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.

2. Suspendisse id sem consectetuer libero luctus adipiscing.

效果如下:

  1. This is a list item 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.

  2. Suspendisse id sem consectetuer libero luctus adipiscing.

当然也支持只对段落首行进行缩进,和上面的段落每行都缩进结果是一样的:

1
2
3
4
5
6
7
*   This is a list item with two paragraphs.

This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

* Another item in the same list.
包含引用的列表

如果要在列表项目内放进引用,那 > 就需要缩进:

1
2
3
4
*   A list item with a blockquote:

> This is a blockquote
> inside a list item.

效果如下:

  • A list item with a blockquote:

    This is a blockquote
    inside a list item.

包含代码块的列表

如果要放代码块的话,该代码块就需要缩进两次,也就是 8 个空格或是 2 个制表符

1
2
3
*   一列表项包含一个列表区块:

<代码写在这>

  • 如果在行首出现数字-句点-空白,可能会误认为是有序列表,要避免这样的状况,你可以在句点前面加上反斜杠,如1986. What a great season.
  • 标记后面最少有一个空格制表符
  • 必须和前后文本存在空行,不然列表可能不能正确解析以及后面的文本可能出现偏移

表格

使用markdown原生的方式插入表格
1
2
3
4
| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| ------ | ------ | ------ |
| *短文本* | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

效果如下:

一个普通标题一个普通标题一个普通标题
短文本中等文本稍微长一点的文本
稍微长一点的文本短文本中等文本
  • 表格的语句上一行必须为空行,不然表格不生效;
  • 内容和|之间的多余空格会被忽略,每行第一个|和最后一个|可以省略;
  • -的数量至少有一个;
  • |、-、:之间的多余空格会被忽略,不影响布局;
  • 表格内容中可以套用其他用法,如加粗、斜体等;
  • 直接在markdown原生表格之前添加html样式(style)也可以对表格样式进行修改
设置表格宽度自适应

解决了按照第一列表头宽度进行自适应的问题:

1
2
3
4
5
<style>
table th:first-of-type {
width: 100px;
}
</style>

为每一列单独设置宽度:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<tr>
<th width=10%>第一列</th>
<th width=35%>第二列</th>
<th width=45%>第三列</th>
<th width=10%>第四列</th>
</tr>
</table>

<!-- 在markdown原生表格之前加上如下内容,设置每一列宽度 -->
<style>
table th:first-of-type {
width: 15%;
}
table th:nth-of-type(2) {
width: 25%;
}
table th:nth-of-type(3) {
width: 60%;
}
</style>

第一列占整个表格宽度的10%、第二列占35%、第三列占45%、第四列占10%。

  • th:first-of-type 的意思是每个 <th> 为其父级的第一个元素,就是指第一列的表头,同理第二、三个使用 th:nth-of-type(2)th:nth-of-type(3)
  • 修改表头的宽度表头对应的列的宽度也就得到了修改
  • 这里有一篇关于markdown表格样式优化的文章,包括鼠标悬停变色表格滚动条隔行变色表头不换行首列不换行等优化
  • excel也能导出html,先在excel中创建表格,然后保存为html,最后复制其中的表格,参考文章
表格对齐问题
  • -:表示内容和标题栏居右对齐;
  • :-表示内容和标题栏居左对齐;
  • :-:表示内容和标题栏居中对齐;
1
2
3
4
| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| :------ | :------: | ------: |
| *短文本* | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

效果如下:

一个普通标题一个普通标题一个普通标题
短文本中等文本稍微长一点的文本
稍微长一点的文本短文本中等文本
使用html插入表格

上述markdown原生的方法只能创建一些简单的表格,如果想创建复杂的表格,如合并单元格调整表格颜色等就需要直接使用html进行创建表格。

实现合并单元格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<tr>
<th>项目1</th>
<th>项目2</th>
<th>项目3</th>
</tr>
<tr>
<td>a1</td>
<td colspan="2">a2</td>
</tr>
<tr>
<td rowspan="2">b1</td>
<td>b2</td>
<td>b3</td>
</tr>
<tr>
<td>c2</td>
<td>c3</td>
</tr>
</table>

最终效果:




















项目1项目2项目3
a1a2
b1b2b3
c2c3
  • table标签:定义 HTML 表格
  • tr 元素定义表格
  • th 元素定义表头
  • td 元素定义表格单元
  • td标签下的colspan(跨列-合并一行的多列)及rowspan(跨行-合并一列的多行)属性进行单元格的合并。
使用html插入表格需要注意空行

markdown在处理上述的表格时会产生大量的空行,除非将整个表格写成一行,不然空行的书目和整个html代码占的行数相同,解决方法是加上escape标签,将整个table套起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<escape>
<table>
<tr>
<th>项目1</th>
<th>项目2</th>
<th>项目3</th>
</tr>
<tr>
<td>a1</td>
<td colspan="2">a2</td>
</tr>
<tr>
<td rowspan="2">b1</td>
<td>b2</td>
<td>b3</td>
</tr>
<tr>
<td>c2</td>
<td>c3</td>
</tr>
</table>
</escape>

最终效果:

项目1项目2项目3
a1a2
b1b2b3
c2c3
偷懒方法之直接复制html代码

从上面html代码可以看出来写着比较麻烦,为了解决这个问题,这里有一个专门生成Latexhtmlmarkdowntextmediawiki支持的表格源码的网站,只需要选取相应的内容即可,还可以调整表格颜色,生成相应的css样式。

生成表格源码的网站
在markdown表格显示竖线

在使用markdown表格时如果想要显示竖线,仅仅使用转义是不能成功的,需要使用HTML实体,竖线的HTML实体为&#124;,一个竖线就使用一个&#124;两个竖线就使用两个&#124;&#124;,使用HTML实体后,网页会自动将其显示为|,关于HTML中的常用字符实体请参考这篇文章


代码块

代码块有两种写法:使用反引号加代码语言种类,代码写完后面也跟三个相同的符号(这种方法最为常用);第二种写法就是简单地缩进 4 个空格或是 1 个制表符就可以。

1
2
3
这是一个普通段落:

这是一个代码区块。
  • 需要和普通段落之间存在空行
  • 最后的三个反引号之后不能存在空格,不然会出错

分割线

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

1
2
3
4
5
6
7
8
9
10
11
* * *

***

*****

- - -

---------------------------------------

_____

最终效果:







使用带空格的星号减号底线建立空格线,空格线会粗一些。



行内元素

链接

markdown支持两种形式的链接语法:行内式参考式两种形式,一般行内式使用较为简单和普遍,所以这里就采用行内式的方式。

链接的使用形式:

1
[an example](http://example.com/ "Title")

最终效果:
an example

  • 方括号内的文字(an example)表示链接作用的文字
  • 圆括号内部第一个是链接地址
  • 第二个是title:鼠标移到链接文字上显示的内容

如果你是要链接到同样主机的资源,你可以使用相对路径

1
See my [About](/about/) page for details.

关于参考式链接:

  • 参考式的链接其实重点不在于它比较好写,而是它比较好读
  • 使用 Markdown 的参考式链接,可以让文件更像是浏览器最后产生的结果,让你可以把一些标记相关的元数据移到段落文字之外,你就可以增加链接而不让文章的阅读感觉被打断
  • 具体关于参考是的讲解可以参考这篇文章
1
2
3
4
5
6
I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"

最终效果:
I get 10 times more traffic from Google than from
Yahoo or MSN.


强调

斜体

markdown使用星号*和底线_作为标记强调字词的符号,被*_ 包围的字词会被转成用 <em>标签包围,显示出斜体的效果。

1
这是关于*斜体*的测试

最终效果:

这是关于斜体的测试

加粗

markdown使用两个星号*和底线_作为标记强调字词的符号,被两个*_ 包围的字词会被转成用 <strong>(加粗显示)包围,显示出加粗的效果。

1
这是关于**加粗**的测试

最终效果:

这是关于加粗的测试

斜体加粗

使用以上的斜体和加粗叠加可以实现斜体和加粗的效果:

1
这是关于***斜体加粗***的测试

最终效果:

这是关于斜体的测试

删除线

要加删除线的文字左右分别用两个~~号包起来,这个也可以叠加斜体以及加粗标记。

1
这是关于~~删除线~~的测试

最终效果:

这是关于删除线的测试

  • 星号*和底线_与被包围的文字之间不能有空格,不然星号*和底线_就会被当成普通的字符显示
  • 如果想加入普通的星号*和底线_,你可以用反斜线,如

行内代码

行内插入代码,可以直接使用反引号(`)将代码包围起来即可。如<div> </div>就是写成:

1
`<div> </div>`

行内代码中加入反引号:可以用多个反引号来开启和结束代码区段,同时起始和结束端都可以放入一个空白,起始端后面一个,结束端前面一个,这样你就可以在区段的一开始就插入反引号:如 A backtick-delimited string in a code span: `foo`、三个反引号就是写成:

1
2
3
4

`` `foo` ``
# 三个反引号在hexo博客中显示可能会出问题
`` ``` ``

插入图片

使用markdown语法插入图片:

使用markdown插入图片与插入链接类似,也有两种方式:行内式和参考式,这里讲解的主要为行内式。关于参考式的用法可以参考链接参考式的用法。

1
2
3
4
5
![图片描述,相当于alt](https://showteeth.oss-cn-beijing.aliyuncs.com/blog_img/test2.png "Optional title,相当于title")
<!-- 居中操作可以使用center标签将上述包裹 -->
<center>
![图片描述,相当于alt](https://showteeth.oss-cn-beijing.aliyuncs.com/blog_img/test2.png "Optional title,相当于title")
</center>

最终效果:

markdown_pic


markdown_pic

Optional title 是用来在鼠标移到图片上时显示的title

使用markdown插入图片的缺点:一般的宽和高等属性不好修改,各个编辑器支持的写法可能有区别


html代码插入图片

针对使用markdown插入图片的缺点,使用html语句可以很好的解决

1
2
3
4
5
6
<!-- 使用img标签-->
<img src="https://showteeth.oss-cn-beijing.aliyuncs.com/blog_img/test2.png" width = "300" height = "200" alt="图片名称" align=center />
<!-- 使用div标签包裹 -->
<div align="center">
<img src="https://showteeth.oss-cn-beijing.aliyuncs.com/blog_img/test2.png" title="使用html插入图片" alt="图片名称" />
</div>

最终效果:

图片名称


图片名称
  • 不推荐使用这个img标签来进行对齐操作,容易和文本混在一起,居中的时候还好;
  • 推荐使用div标签包裹img标签。


常见问题

字符转义

markdown支持以下这些符号前面加上反斜杠来帮助插入普通的符号

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


常见错误原因集锦

  • html块级元素上下没有空格,块级元素是指 <div><table><pre><p> 等标签
  • 列表与前后内容之间没有空格
  • 列表内容和标记之间没有空格
  • 换行操作只回车没有在上一行文本末尾增加两个以上空格
  • 停止引用需要和下一行文本空行(另起一段),不然也会被引用进去
  • 代码最后的` 之后不能存在空格,不然会将后面的内容也写入代码内
  • 强调,不管是加粗还是斜体,标记*或`不能与文本之间存在距离**,不然会失效,标记会显示成标记本身,即***`
  • 表格的语句上一行必须为空行,不然表格不生效


参考链接


-----本文结束感谢您的阅读-----

本文标题:markdown基础语法

文章作者:showteeth

发布时间:2019年02月24日 - 12:09

最后更新:2019年03月21日 - 16:25

原始链接:http://showteeth.tech/posts/65136.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%