Markdown的基本使用

452 阅读4分钟

背景

  时光逝去,逐渐丧失年轻人的好记性,为了日后便于翻看,遂决定用博客记录起来。无意发现掘金这个好平台,里面有很多大牛都在这发表技术文章,所以也就借助这个平台记录一些美好的事物,也可方便其TA有需要的人。掘金支持Markdown和富文本模式写文章,因此总结了Markdown的基本使用规范。

目标

  成为一种适用于网络的书写语言

兼容HTML

  HTML是一门超文本标记语言,对于前端开发人员再熟悉不过了。如果你是前端开发人员,那么你先天比一般人使用Markdown拥有一定优势,在Markdown未能实现的功能,可以使用HTML语法去实现。
  那么Markdown的存在是否会对HTML的地位产生威胁呢。答案是否定的。Markdown并不是想要取代HTML,它的语法很简单,只对应HTML的一小部分。

基本使用

特殊字符

©

输出:

©

标题

方式1:
This is an H1
======
This is an H2
-----

输出:

This is an H1

This is an H2

tip:任何数量的=和-都有同样的效果

方式2:
# 这是H1
## 这是H2
......
###### 这是H6

输出:

这是H1

这是H2

......

这是H6

分割线

在一行中使用三个以上的星号、减号、底线来简历一个分割线,可以在星号或者减号中间插入空格
* * *
***
*******
- - -
- - - - - -

输出:






单行代码

`this is code`

``Code with `backticks` ``

输出:

this is code
Code with `backticks`

列表

无序列表使用*、+、-作为标记
* dingzi
* chuizi
* qizi

输出:

  • dingzi
  • chuizi
  • qizi

有序列表:数字紧接着英文句点:
1. 钉子
2. 锤子
3. 启子

输出:

  1. 钉子
  2. 锤子
  3. 启子

引用

引用的文字前面使用>即可:
> 江山易改,本性难移

输出:

江山易改,本性难移

表格

Markdown支持简单方式和原生方式。

简单方式:
name | sex | height
:- | :-: | -
dingzi | male | 200
chuizi | female | 201

输出:

name sex height
dingzi maile 200
chuizi female 201

原生方式:
| name | sex | height |
| :-: | -: | :-: |
| dingzi | male | 200 |
| chuizi | femail | 201 |

输出:

name sex height
dingzi male 200
chuizi femail 201

语法:

  • 无论是使用简单方式还是原生方式:第一行为表头;第二行分隔表头和主体部分;第三行开始每一行代表一个表格行;
  • 列与列之间用管道符号“|”隔开,原生方式的表格比简单方式每行的两边多了管道符号;
  • 可在第二行指定不同单元格的对齐方式:默认是左对齐;在“-”右边加上“:”是右对齐(-:);在“-”左边加上“:”是左对齐(:-);在“-”左右两边加上“:”是居中对齐(:-:)。

链接

Markdown支持两种方式:行内式和参考式。
使用方法:

  • 链接文字使用[]方括号括起来;
  • 行内式的链接:链接文字用方括号括起来,后面紧随圆括号并插入网址链接,如果想加入链接title文字,只要在网址后面加上,用双引号把title文字包起来。
  • 参考式的链接:链接文字用方括号括起来,后面紧随另一个方括号,填入链接的id标志;接着在文件任意位置处,对链接的的地址和悬浮标题进行定义

行内式链接

[链接文字](链接地址 "链接标题")
[链接文字](链接地址)
eg:
[点我进入baidu](https://www.baidu.com "悬浮标题")
[点我进入google](https://www.google.com)
输出:

点我进入百度
点我进入淘宝

参考式链接

[链接文字][链接ID]
[链接ID]:链接地址 "链接描述"
tip: 链接描述可以缺省

eg:
[点我进入百度][百度ID]
[点我进入淘宝][淘宝ID]
[淘宝ID]:https://www.taobao.com/ "悬浮标题"
[百度ID]: http:www.baidu.com

点我进入百度
点我进入淘宝

图片

图片的使用方法和链接的使用方法类似。
行内式使用方法:

  • 一个感叹号!
  • 接着一个方括号,里面放上图片的替代文字
  • 接着一个普通括号,里面放上图片的网址,最后还可以用双引号把title包起来,title可缺省

![alt 文字](图片地址 "图片标题")

参考式的图片语法:
![alt text][id]
[id]: url/to/image

eg:
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/5/1714a175e3ec6f4b~tplv-t2oaga2asx-image.image "无心法师")
输出:

无心法师

自动链接

http://example.com
输出:

example.com

tip:Markdown暂时无法支持图片width,height,可以使用html进行编写 html引入图片:
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/5/1714a175e3ec6f4b~tplv-t2oaga2asx-image.image" width="77" height="48">
输出: