Markdown 学习

create by jsliang on 2018-08-22 17:58:56
Recently revised in 2019-05-30 16:16:12

小伙伴们如果觉得不错可以到 jsliang 的文档库 为 jsliang 点个 star,谢谢~

什么是 Markdown?

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

jsliang 看来,Markdown 就是 HTML 的简化版、TXT 文本的格式版。

如果你在编写中存在难点,你可以直接在 Markdown 中使用 HTML 标记语言、CSS 样式以及 JS 脚本,对自己编写的文章等进行扩展。

一 目录

不折腾的前端,和咸鱼有什么区别

目录
一 目录
二 前言
三 Markdown 语法
3.1 标题
3.2 无序列表
3.3 有序列表
3.4 区块引用
3.5 分割线
3.6 链接
3.7 图片
3.8 代码框
3.9 表格
3.10 强调
3.11 转义
3.12 删除线
3.13 功能实现
3.14 缩略标签
四 结语

二 前言

返回目录

jsliang 在一开始的时候,使用过 Word 或者自己搭建的富文本博客来编写自己的文章,说实话,那太痛苦了,代码无法做很好的处理,文章写起来不利索,处理样式的时候浪费大量时间……

然后,在大佬的推荐下,jsliang 接触了 Markdown,并感受到世界深深的鼓励。

是的,谁用谁知道!

三 Markdown 语法

返回目录

下面介绍 Markdown 中的常用语法。

3.1 标题

返回目录

  • 用法介绍:标题可以像 HTML 一样使用一级至六级标题,使用 # 即可,一级标题的使用方法为:# 一级标题,几级标题就使用几个 #

  • 写法

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
  • 演示

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

3.2 无序列表

返回目录

  • 用法介绍:无序列表可以使用 * + - 这三种格式,这里推荐使用** 列表1

  • 写法

* 列表1
+ 列表2
- 列表3
  • 演示

  • 列表1

  • 列表2
  • 列表3

3.3 有序列表

返回目录

  • 用法介绍:有序列表使用数字1. ***即可,如果开始数字是3,那这个列表就从3. ***开始,第二条是4. ***

  • 写法

1. 列表1
2. 列表2
3. 列表3
  • 演示

  • 列表1

  • 列表2
  • 列表3

3.4 区块引用

返回目录

  • 用法介绍:区块引用使用 > 这个符号,空格后放文本即可:> 一级区块

  • 写法

> 注意:区块引用的左边,有个竖线!
>> 注意:引用还可以嵌套使用,这是二级的引用,二级以上相信你也懂了
>>> 注意:这是三级嵌套,相信你知道怎么用了
  • 演示

注意:区块引用的左边,有个竖线!

注意:引用还可以嵌套使用,这是二级的引用,二级以上相信你也懂了

注意:这是三级嵌套,相信你知道怎么用了

3.5 分割线

返回目录

  • 用法介绍:分割线使用三个及以上的 * 或者 - 或者 _ 都可,这里使用三个 ****

  • 写法

***
---
___
  • 演示

*


3.6 链接

返回目录

链接分为行内式和参数式这两种方法

3.6.1 行内式

返回目录

  • 写法
[jsliang 的网站](http://www.jsliang.top)
  • 演示

jsliang 的网站

3.6.2 参数式

返回目录

  • 写法
[site]:http://www.jsliang.top "网站"
[网站]:http://www.jsliang.top "网站"

这里是 [site],这里是 [网站]
  • 演示

这里是 site,这里是 网站

3.7 图片

返回目录

  • 用法介绍

如果是本地图片,则支持绝对路径和相对路径

如果是网络图片,则可以使用 http://** 来引入

如果是 base64,怎么使用参考 markdown 引用 base64

  • 写法
![图片](../../../public-repertory/img/other-markdown-logo.jpg)
  • 演示

图片

3.8 代码框

返回目录

代码框分为单行用和多行用这两种方法:

3.8.1 单行用

返回目录

  • 用法介绍``

  • 写法

`<p>你好使用者,要看看 jsliang 的网站吗?<a href="http://www.jsliang.top">点我跳转</a></p>`
  • 演示

<p>你好使用者,要看看 jsliang 的网站吗?<a href="http://www.jsliang.top">点我跳转</a></p>

3.8.2 多行用

返回目录

  • 用法介绍

```
```

  • 写法

```注释(可以换成 html css js 等,GitHub 或者掘金有相应的渲染机制)
多行代码文本1
多行代码文本2
```

```js
console.log('hello jsliang');
```

  • 演示
多行代码文本1  
多行代码文本2

3.9 表格

返回目录

表格有三种表示方法:

3.9.1 第一类表格

返回目录

  • 写法

| name | age | sex |
| :-----: | :--- | ---: |
| jsliang | 23 | 男 |
| 小梁 | 23 | 男 |

  • 演示
name age sex
jsliang 23
小梁 23

3.9.2 第二类表格

返回目录

  • 写法

| name | age | sex |
| ----- | ----- | ----- |
| jsliang | 23 | 男 |
| 小梁 | 23 | 男 |

  • 演示
name age sex
jsliang 23
小梁 23

3.9.3 第三类表格

返回目录

  • 写法

学号 | 姓名 | 分数
- | - | -
小明 | 男 | 75
小红 | 女 | 79
小陆 | 男 | 92

  • 演示
学号 姓名 分数
小明 75
小红 79
小陆 92

3.10 强调

返回目录

3.10.1 字体倾斜

返回目录

  • 用法介绍*字体倾斜* 或者_字体倾斜_

  • 写法

*字体倾斜*
_字体倾斜_
  • 演示

字体倾斜

字体倾斜

3.10.2 字体加粗

返回目录

  • 用法介绍**字体加粗** 或者 __字体加粗__

  • 写法

**字体加粗**
__字体加粗__
  • 演示

字体加粗

字体加粗

3.11 转义

返回目录

  • 用法介绍:通过使用\加上特殊字符,达到转义效果。

  • 写法

* \\
* \`
* \~
* \*
* \_
* \-
* \+
* \.
* \!
* ……
  • 演示

  • \

  • `
  • ~
  • *
  • _
  • -
  • +
  • .
  • !
  • ……

3.12 删除线

返回目录

  • 用法介绍~~请删除我吧~~

  • 写法

~~请删除我吧!~~
  • 演示

请删除我吧!

3.13 功能实现

返回目录

3.13.1 实现的功能

返回目录

  • 写法
- [x] 功能1
- [x] 功能2
  • 演示

  • [x] 功能1

  • [x] 功能2

3.13.2 未实现的功能

返回目录

  • 写法
- [ ] 功能3
- [ ] 功能4
  • 演示

  • [ ] 功能3

  • [ ] 功能4

3.14 缩略标签

返回目录

  • 介绍:缩略标签属于 HTML 中的内容,但是巧妙用在 Markdown 也是可行的。

  • 写法

<details>
  <summary>基础知识</summary>

被缩略

你还需要知道其他的吗?

</details>
  • 演示
基础知识 被缩略 你还需要知道其他的吗?

四 结语

返回目录

至此,Markdown 语法介绍完毕,有兴趣的小伙伴继续去了解更深层次的 Markdown 语法吧!


jsliang 广告推送:
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看!

图 图

知识共享许可协议
jsliang 的文档库梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

Copyright © jsliang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-05-30 16:16:13

results matching ""

    No results matching ""