Markdown上手指南

前言

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

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

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

舒適提示:vue

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

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

基礎語法

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

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

注意點 : 全部標記僅支持英文模式(半角)!!編輯器

標題

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

2019-12-11 11.19.10.gif

文字強調

粗體

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

2019-12-11 11.25.40.gif

粗體

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

2019-12-11 11.26.17.gif

着重強調(粗體+斜體)

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

2019-12-11 11.38.08.gif

列表

有序列表

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

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

2019-12-11 11.29.24.gif

無序列表

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

- asdklfjsaf 
- fasdfsadf 


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

2019-12-11 11.33.56.gif

列表混合及嵌套

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

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

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

2019-12-11 11.57.09.gif

外部連接

格式:方括號小括號(連接)

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

2019-12-11 11.51.50.gif

圖片引用展現

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

![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)
複製代碼

2019-12-11 11.55.22.gif

水平分割線

格式: 空行 ---

呼叫逗比

---

逗比迴應你了
複製代碼

2019-12-11 12.00.06.gif

引用

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

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

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

2019-12-11 13.41.43.gif

行內代碼

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

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

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

2019-12-11 12.02.41.gif

拓展語法

表格

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

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

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


複製代碼

2019-12-11 13.50.51.gif

代碼高亮

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

複製代碼

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

```javascript
// 我是 js 高亮
import vue from 'vue';
複製代碼
# 我是 bash 高亮
ls -l | grep 'haha'
複製代碼

Kapture 2019-12-11 at 14.27.58.gif

任務列表

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

  • - [ ] text : 方括號內部空格代指是待辦事項
  • -  [x] text : 方括號內部 x代指事項已經完成
- v1版本
  - [x] 用戶接口打通
  - [ ] 用戶接口合併
 - [ ] 合併重複字段
 - [ ] 呵呵到

複製代碼

Kapture 2019-12-11 at 14.36.32.gif

文字高亮

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

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

==是啊==

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

Kapture 2019-12-11 at 14.40.08.gif

腳註

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

格式:

  • 聲明: [^text]: description
  • 引用: hello[^text]
[^李白]: 一個喝酒的詩人

牀前明月光[^李白]

複製代碼

Kapture 2019-12-11 at 14.45.25.gif

刪除線

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

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

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

Kapture 2019-12-11 at 14.52.08.gif

下標

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

H~2~o
複製代碼

Kapture 2019-12-11 at 14.53.46.gif

mermaid

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

image.png

Kapture 2019-12-11 at 18.07.24.gif

總結

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

相關文章
相關標籤/搜索