Markdown常用语法详解

背景知识

什么是html

html是一种网页标记语言。我们平常见到的那么好看的网页就是通过html语言来编写的。

html语言举例:
<h1>hello world</h1>    这是一级标题
<h2>hello world</h2>    这是二级标题
<h3>hello world</h3>    这是三级标题

<img src="https://i.loli.net/2019/08/17/xT2ohLis9kE7y6Y.png"/>  这是图片
什么是markdown

Markdown:

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

Markdown和Html的关系:

Markdown会被解析为html文件来显示,所以在Markdown中可以直接使用html语法


Markdown编辑器

编辑器的安装与配置

网上有很多的编辑器。我使用的是Visual Studio Code 2013(简称VSCode2013)
在VSCode中点击插件,搜索markdown,安装Markdown All in one 和Markdown Preview Enhanced。

编辑器如何解析md文件



下面来讲一讲Markdown的语法

【关于语法】
  • 元素之间应该用空行隔开。如果有多个空行,也会解析为一个空行。
  • 除代码块中,多个空格也会被解析为一个空格。
  • 需要使用html语法来表示空格和换行。
  • 如果想要输出Markdown预留的字符,如*,可以在前面添加反斜杠\进行转义。

【注释】

注释是为了让编写者标记代码,更好理解

语法:
<!-- 我是注释 -->
[^_^]: 
    我是注释啊
    我也是注释啊

【标题】

语法:


# 一级标题      <!-- 井号与标题内容之间使用空格隔开 -->

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

我是一级标题
====

我是二级标题
----

效果如下:

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题

我是一级标题

我是二级标题


【标题居中显示】

在Markdown中没有相应的语法来实现这个功能,我们同样借用html的语法来实现。

语法:

# <center>标题居中显示</center>

效果:

标题居中显示

解释:

井号代表一级标题,所以这里可以自定义。
<center>标签在html中表示居中显示文本。


【首行缩进】

在Markdown中,无法实现首行缩进的功能,因为多个空格会被解析为一个空格。
那么,我们可以借用html的语法来实现首行缩进:&#160;表示一个空格。

语法:

&#160;&#160;&#160;&#160;你好世界,你好世界,你好世界.
你好世界,你好世界,你好世界.
你好世界,你好世界,你好世界.

效果:

    你好世界,你好世界,你好世界.
你好世界,你好世界,你好世界.
你好世界,你好世界,你好世界.


【分块】

当你想说明一段话时,你就可以使用分块语法了。
分块语法直观,可以直接看出块之间的关系。

语法:

> 中华人民共和国(People's Republic of China),简称“中国”,成立于1949101日 ,位于亚洲东部,太平洋西岸,是工人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家,以五星红旗为国旗、《义勇军进行曲》为国歌,国徽内容为国旗、天安门、齿轮和麦稻穗,通用语言文字是普通话和规范汉字,首都北京 ,是一个以汉族为主体、56个民族共同组成的统一的多民族国家。
> 
> 中国的省份有:
>> 北京、江苏、浙江
>>> 北京、南京、杭州
> 
> 北京的特色有:
>> 北京烤鸭...

效果:

中华人民共和国(People’s Republic of China),简称“中国”,成立于1949年10月1日 ,位于亚洲东部,太平洋西岸,是工人阶级领导的、以工农联盟为基础的人民民主专政的社会主义国家,以五星红旗为国旗、《义勇军进行曲》为国歌,国徽内容为国旗、天安门、齿轮和麦稻穗,通用语言文字是普通话和规范汉字,首都北京 ,是一个以汉族为主体、56个民族共同组成的统一的多民族国家。

中国的省份有:

北京、江苏、浙江

北京、南京、杭州

北京的特色有:

北京烤鸭…

可以看到分块语法>是可以嵌套的。


【列表】

列表可以清晰得列出同类别的信息。

1.无序列表

语法:

* 无序列表1
* 无序列表2
* 无序列表3

+ 无序列表4
+ 无序列表5
+ 无序列表6

- 无序列表7
- 无序列表8
- 无序列表9

效果:

  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4
  • 无序列表5
  • 无序列表6
  • 无序列表7
  • 无序列表8
  • 无序列表9
2.有序列表

语法:

1. 有序列表
2. 有序列表
3. 有序列表

1. 有序列表
1. 有序列表
1. 有序列表

效果:

  1. 有序列表

  2. 有序列表

  3. 有序列表

  4. 有序列表

  5. 有序列表

  6. 有序列表

可以看到即便我写的都是1,解析器也会帮我解析为有序列表。


【分隔线】

语法:

----

****

效果:



【代码块】

在代码块中的内容表示代码
所有的字符都被认为是代码,不会被解析。

语法:

这是代码,前面添加Tab键:
    cout<<hello world<<endl;
在普通文本里使用代码:
Use the `printf()` function.Use the `printf()` function.
这是Shell语言的代码,使用反引号(键盘上1的旁边)来包围代码,并表明语言:
```shell
echo "hello world" 
```
代码里插入反引号, 使用不同数量的反引号包围代码块:
``There is a literal backtick (`) here.``

效果:

这是代码,前面添加Tab键:

cout<<hello world<<endl;

在普通文本里使用代码:
Use the printf() function.Use the printf() function.

echo "hello world" 

代码里插入反引号, 使用不同数量的反引号包围代码块:
There is a literal backtick (`) here.


【强调】

语法:

*斜体强调*
_斜体强调_
**加粗强调**
__加粗强调__

效果:

斜体强调
斜体强调
加粗强调
加粗强调


【插入链接】

[方式1]

语法:

[我是链接1](http://example.com/ "鼠标悬浮链接时显示的文本")      <!-- 注意链接后有空格 -->
[我是链接2](123.txt)     <!-- 打开相对路径资源,这里省略了鼠标悬浮链接时显示的文本 -->
<http://example.com/>   <!-- 自动链接 -->

效果:

我是链接1

我是链接2

http://example.com/

[方式2]

如果链接非常的长,那么语法会变得难以阅读。
可以使用这样的方式:在文档最后对链接命名,需要此链接时进行调用。

语法:

[打开谷歌][Google]
[Google][]          <!-- 简写链接 -->


<!-- 在文档的最后对链接命名 -->
[id1]: http://example.com/  "鼠标悬浮显示"      <!-- 这里把链接命名为id1 -->
[Google]: http://google.com/ "鼠标悬浮显示"     <!-- 这里把链接命名为Google -->

效果:

打开谷歌
Google


【插入图片】

Markdown中插入图片的语法无法指定图片大小,我们这里同样可以借用Html语法来插入图片。

Markdown语法:

![插入图片](https://i.loli.net/2019/08/28/f4dhZ2HmD9lRrzY.jpg)

Markdown语法效果:

插入图片

可以看到上面的图片虽然能正确显示,但我们没办法指定他的大小

所以这里建议使用HTML的语法

HTML语法:

<img src="https://i.loli.net/2019/08/28/f4dhZ2HmD9lRrzY.jpg"/>

HTML语法效果:

HTML语法-指定大小:

<img height=200px src="https://i.loli.net/2019/08/28/f4dhZ2HmD9lRrzY.jpg"/>  指定高度(px是像素单位)

指定大小后的效果:


【插入表格】

注意:标题和内容的语法是一样的,他们使用| ------ |分隔.

语法:

| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| ------ | ------ | ------ |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

效果:

一个普通标题一个普通标题一个普通标题
短文本中等文本稍微长一点的文本
稍微长一点的文本短文本中等文本

可以看到,标题是居中加粗显示的.内容是靠左显示的普通文本.


【插入数学符号】

在HTML的语法当中,有非常强大的数学符号标签。所以只要想插入数学符号,第一时间要想到HTML语法。
这里举例如何插入上标和下标,其他的数学符号可以找度娘。

语法:

H<sub>2</sub>O              <!-- 下标 -->
新东方牌方便面<sup>TM</sup>  <!-- 上标 -->

效果:

H2O
新东方牌方便面TM


喜欢的给我点鼓励吧(经济方面的哦)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值