Markdown上手指南

Markdown上手指南

前言

markdown 是一門很實用的標記語言，如果有HTML 基礎學起來會很是快。

演示效果均是從typora 展現的,爲何用它，由於它是一個成熟的 md 編輯器！

• markdown 所見即所得, 部分還增長了人性化的交互(好比代碼高亮)
• 支持公式
• 支持大部分的拓展語法
• 支持主流的流程圖渲染

舒適提示:

已經會的不用往下面看了,這文章一開始輸出的目的是給咱們研發組的小夥伴快速上手的。

由於前端這塊的文檔基本切換到MD來維護，花了點時間錄製了一波GIF演示

基礎語法

基礎語法是支持度最高的,市面上主流的 markdown 解析器基本都支持。

拓展語法須要藉助不一樣的插件或者庫實線,通用性沒那麼強。

注意點 : 全部標記僅支持英文模式(半角)！！

標題

# H1
## H2
### H3
#### H4
##### H5
###### H6
複製代碼

文字強調

粗體

**我是粗體**
複製代碼

粗體

_我是斜體_
*我也是斜體_
複製代碼

着重強調(粗體+斜體)

***我着重的強調,再嗶嗶我嫩死你***
複製代碼

列表

有序列表

有序列表的格式是:   數字小數點+空格+文本

1. afdslf
2. fsadfae
3. Ewarewr
複製代碼

無序列表

格式: 橫線(星號) + 空格 + 文本

- asdklfjsaf 
- fasdfsadf 


* 發水電費盧卡斯
* 發順豐惹我
複製代碼

列表混合及嵌套

無論是有序列表仍是無序列表,都支持多級嵌套，也支持有序無序列表混用。

如果增長一些外部擴展，還支持todo混入

- 測試啊
  - 真的測試啊
  - 你不信啊
 1. 我是三級有序列表
 2. 呵呵噠
  - 唉
複製代碼

外部連接

格式：感嘆號方括號小括號(連接)

[點擊我就跳到百度了](https://www.baidu.com) 
複製代碼

圖片引用展現

格式：感嘆號+外部連接的格式。 連接支持相對引用！

![closeup photo of computer code screengrab](https://images.unsplash.com/photo-1524666643752-b381eb00effb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80)
複製代碼

水平分割線

格式: 空行 ---

呼叫逗比

---

逗比迴應你了
複製代碼

引用

通常你引用了別處的內容，這個就能夠用上了

格式： 大於號(>) + 空格 + 內容

>牀前明月光
> >疑是地上霜
> > - 這是**李白**的詩歌 
複製代碼

行內代碼

行內代碼的效果通用都是灰色,不能針對語法高亮

格式：反引號+內容+反引號

`module.exports= ()=>{}`
複製代碼

拓展語法

表格

表格的語法也很簡單，就是寫的多一些，由於列越多寫的越多。

默認的列左對齊,也支持設置居中和右對齊, 橫杆大於等於3， 列的豎必須閉合才能表明一列！

• 默認對齊(左對齊) :  :----
• 居中對齊 : :---:
• 右對齊: ---:

| 默認左對齊     |       居中對齊       |     右對齊 |
| :--- | :------------------: | -------: |
| 啊水電費薩德 | 阿斯頓六塊腹肌阿斯頓 | 發水電費 |
| 1321 | 432 | 654645 |
| 啊水電費薩德 | 阿斯頓六塊腹肌阿斯頓 | 發水電費 |
| 1321 | 432 | 654645 |


複製代碼

代碼高亮

代碼高亮看採用的是什麼高亮庫了,好比前端這塊有用highlightjs 或 prism的。
因此高亮支持語言也得看高亮庫是否支持！！

複製代碼

我是純文本 plain text，由於我沒有指定語言

```javascript
// 我是 js 高亮
import vue from 'vue';
複製代碼

# 我是 bash 高亮
ls -l | grep 'haha'
複製代碼

![Kapture 2019-12-11 at 14.27.58.gif](https://cdn.nlark.com/yuque/0/2019/gif/186190/1576045737085-f6be40e7-da20-4df1-94a6-1504d879940e.gif#align=left&display=inline&height=412&name=Kapture%202019-12-11%20at%2014.27.58.gif&originHeight=412&originWidth=854&size=1097891&status=done&style=none&width=854)

<a name="UToYb"></a>
### 任務列表

這個很實用，就是展現待辦事項效果, 算是列表的變種，能夠混合使用

- `- [ ] text` : 方括號內部空格代指是待辦事項
- `-  [x] text` : 方括號內部 x代指事項已經完成


```markdown
- v1版本
  - [x] 用戶接口打通
  - [ ] 用戶接口合併
    - [ ] 合併重複字段
    - [ ] 呵呵到

複製代碼

文字高亮

格式：雙等號+文本+雙等號

===據說我要唄高亮了===

==是啊==

==亮瞎眼了==
複製代碼

腳註

這個東西在寫文獻用的最多

格式：

• 聲明: [^text]: description
• 引用: hello[^text]

[^李白]: 一個喝酒的詩人

牀前明月光[^李白]

複製代碼

刪除線

你沒看錯，這不屬於第一個版本的草案的內容，也是後續纔有的

格式：兩個波浪線+文本+波浪線

~~我給刪除了，你看~~
複製代碼

下標

把字縮放，適合用來表現公式類的

H~2~o
複製代碼

mermaid

mermaid 不單單能夠畫流程圖,具體能夠看mermaid 上手指南

總結

Markdown 的標準方案一直都沒有更新,如今的加強大多都是依賴第三方實現。好比更加豐富的表格功能,數學公式等等！可是這並不能阻擋 md 流行, 隨時可見的身影，代碼社區，編程工具內置實現等等。有不對之處請留言,謝謝閱讀