一文秒懂markdown

文章目錄

- - 1. markdown 是什麼
  - 2. markdown 基礎文法
  - - 2.1. 使用#來表示标題
    - 2.2. 分塊的引用
    - 2.3. 插入圖檔
    - 2.4. 插傳入連結接
    - 2.5. 插入清單
    - 2.6. 添加分割線
    - 2.7. 文字強調
  - 3. 進階文法
  - - 3.1. 插入代碼塊
    - 3.2. 插入表格
  - 4. 補充文法
  - - 4.1. 如何縮進
    - 4.2. 如何換行
    - 4.3. 如何給标題添加序号
    - 4.4. 給特殊字元進行轉義
    - 4.5. 如何進行跳轉
    - 4.6. 如何自動生成目錄
    - 4.7. 校驗 md 的格式
    - 4.8. 如何浏覽 markdown 檔案
    - 4.9. 如何修改圖檔的樣式
    - 4.10. 如何插入音樂
    - 4.11. 如何插入視訊
    - 4.12. 如何自定義字型的樣式
    - 4.13. 如何渲染 md 檔案
    - 4.14. Typora 編輯器常用快捷鍵
    - 4.15. 配置圖床

1. markdown 是什麼

markdown 是一種輕量級标記語言，它允許人們使用易讀易寫的純文字格式編寫文檔。人話即：markdown 類似于 office word，可以使用簡單的文法來實作完美的布局。其效果圖如下：

一文秒懂markdown

2. markdown 基礎文法

2.1. 使用#來表示标題

#h1

字型最大

######h6

字型最小

2.2. 分塊的引用

可以使用

>段落xx

放于句首，将句子進行分塊

段落

2.3. 插入圖檔

使用

！[圖檔名稱](圖檔位址)

來插入圖檔

一文秒懂markdown

2.4. 插傳入連結接

使用

[超連結名稱](連結位址)

來添加超連結，比如百度百科

2.5. 插入清單

1.使用

* + -後接空格

來實作無序清單

2.使用

1.後接空格

來實作有序清單

* 黃小古 1
* 黃小古 2
1. 黃小古 1
2. 黃小古 2

效果如下：

黃小古 1

黃小古 2

黃小古 1

黃小古 2

備注 1：在有序清單中，markdown 隻關注第一項，後面的序号可以随便寫，比如每一項都寫

1.

備注 2：如果不能正常顯示清單時，請使用 4 個空格進行縮進

2.6. 添加分割線

1.使用

***

來添加分割線

2.使用

---

來添加分割線

比如：

2.7. 文字強調

1.使用

*文字*

來傾斜字型

2.使用

_文字_

來傾斜字型

3.使用

**文字**

來加粗字型

4.使用

__文字__

來加粗字型

5.使用

***文字***

來加粗字型

6.使用

___文字___

來加粗字型

測試一下文字斜體

測試一下文字加粗

測試一下文字加粗斜體

備注：如果使用

失效，可以試一下在前面加空格

3. 進階文法

3.1. 插入代碼塊

1.如果是在行内插入代碼，可以使用 `代碼代碼`

2.如果是插入整段代碼，可以使用 ```

```javascript

代碼代碼代碼

```

備注：``` 或 ` 可以用于生成文字區域（轉義字元不需要轉義），如

```html

測試特殊字元#

```

測試特殊字元

3.2. 插入表格

字段名|字段長度|備注
:---:|:---:|:---:
name|18|使用者名
sex|男|性别

字段名	字段長度	備注
name	18	使用者名
sex	男	性别

備注 1：

:---:

左右兩邊的

用于控制表格内容的位置。中間的

數量沒有要求。左邊

表示居左，右邊

表示居右

備注 2：表格後面要有分行

4. 補充文法

4.1. 如何縮進

當輸入多個

空格

時，最多隻顯示一個空格。在 md 中，需要使用特殊字元來插入空格。

一個空格

&ensp;

兩個空格

&emsp;

四個空格

一個空格

兩個空格

四個空格

4.2. 如何換行

1.可以使用

<br/>

進行手動換行

2.也可以在句末添加

兩個空格

來自動換行

4.3. 如何給标題添加序号

1.在 VS Code 編輯器中安裝 Markdown-index 插件

2.在編輯好的 md 檔案中，使用快捷鍵 F1 打開指令行視窗

3.輸入 Markdown add index

一文秒懂markdown

注：注意指令行的大小寫

4.4. 給特殊字元進行轉義

可以使用

\+特殊字元

進行轉義，如輸入

\#

4.5. 如何進行跳轉

1.添加跳轉點

[關注一下嘛](#jump)

2.在某處添加定點

<span id="jump"/>

4.6. 如何自動生成目錄

使用

[TOC]

來生成目錄，其會捕獲所有帶

的标題

4.7. 校驗 md 的格式

在 VS Code 編輯器中安裝 dmlint 插件即可

4.8. 如何浏覽 markdown 檔案

1.下載下傳 Markdown Reader 插件，并安裝在 Chrome 浏覽器中

2.将 .md 檔案拖入浏覽器中即可

Markdown Reader 插件下載下傳

4.9. 如何修改圖檔的樣式

使用 html 标簽來修改圖檔的樣式

1.修改圖檔位置:

<div align=center>
    <img width="" height ="" src=""/>
</div>

2.修改圖檔大小:

<img width="" height ="" src=""/>

居中、限制圖檔大小的效果如下圖

一文秒懂markdown

3.使用

七牛雲

圖床來修改圖檔的大小

官方文檔

例子：在 url 後面增加

?imageView2/2/w/1000/q/100!

備注：

表示按比例變化，

表示寬度，

表示縮略圖的品質（q 隻對 jpg 有效），

表示強制使用該品質

4.有時候圖檔加載的過程中會出現樣式跳動，怎麼辦呢？可以先給圖檔設定大小

4.1 安裝

markdown-image-size

，在 cmd 中輸入

npm install -g markdown-image-size

4.2 使用指令

mimgs -s "dirPath or baseUrl" file/to/*.md -o

來将所有的圖檔設定長度和寬度

4.3 原理：将會解析 markdown 文本，得到

<img>

![]()

文本中的 src ，通過讀本地檔案或發送請求得到圖檔資料，進而得到圖檔大小，然後進行文本替換/插入

4.4 參考指令

Usage: mimgs [options] <files...>

 Options:

   -v --version                get current version
   -h --help                   how to use it
   -s --source <path or url>   base path from relative path
   -o --overwrite              overwrite files
   -q --quiet                  Don't print any
   -l --log                    Do print log, Don't print text
   --ignore-relative           ignore relative path, overrides any -s options.

4.10. 如何插入音樂

使用 html 标簽來插入音樂

1.在網易雲音樂中導出音樂的外鍊（要求是 iframe 外鍊）

2.插入代碼

<div align=center>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="" height="" src=""/>
</div>

備注：如何生成網易雲的音樂外鍊？看下面的 gif

一文秒懂markdown

備注：如果不自動播放，将 auto 設定為 0

4.11. 如何插入視訊

使用 html 标簽來插入視訊

1.找到視訊的外鍊（要求是 iframe 外鍊）

2.插入代碼

備注：如何擷取視訊的外鍊呢？看下面 gif 動圖

一文秒懂markdown

4.12. 如何自定義字型的樣式

使用 html 标簽來自定義字型樣式

1.插入代碼

測試一下<font color="green" size="6px">字型</font>樣式

測試一下字型樣式

4.13. 如何渲染 md 檔案

1.打開 Md2All 網站

2.将 md 代碼複制到該網站的文本框中

3.點選複制（會自動複制 Md2All 網站生成的 html 文檔）

4.将 html 文檔拷貝到需要的地方，如 CSDN、微信推文

Md2All 位址

一文秒懂markdown

4.14. Typora 編輯器常用快捷鍵

熱鍵	描述
ctrl + `+ / -`	修改字型的大小
ctrl + b	字型加粗
ctrl + i	字型傾斜
ctrl + u	字型加下劃線
alt + shift + 5	添加删除線
ctrl + t	插入表格？
ctrl + shift + l	關閉/打開左側導航欄
ctrl + /	切換 markdown 基本文法和展示效果
ctrl + \	清除格式

4.15. 配置圖床

申請域名并進行備案
在七牛雲中添加域名

一文秒懂markdown

在域名服務商中添加解析記錄【用于域名的二次跳轉】

一文秒懂markdown

字段	值	描述
記錄類型	CNAME	域名跳轉
主機記錄	img	填入在七牛雲中配置的主機
解析線路	預設
記錄值	填入七牛雲給我們的 CNAME 值
TTL	10 分鐘

備注：本例以阿裡雲伺服器作為案例展示

等待 8-15 分鐘後，切換圖床的域名

一文秒懂markdown

使用 PicGo 作為圖床用戶端

PicGo 位址

一文秒懂markdown

簡稱	地區
z0	華東
z1	華北
z2	華南
na0	北美
as0	東南亞

使用

a、快捷鍵
ctrl + shift + p
實作快速上傳，并在剪貼闆中生成圖檔的位址

b、将圖檔拖拽到上傳區也可以實作圖檔的上傳

一文秒懂markdown

文章目錄

1. markdown 是什麼

2. markdown 基礎文法

2.1. 使用#來表示标題

2.2. 分塊的引用

2.3. 插入圖檔

2.4. 插傳入連結接

2.5. 插入清單

2.6. 添加分割線

2.7. 文字強調

3. 進階文法

3.1. 插入代碼塊

3.2. 插入表格

4. 補充文法

4.1. 如何縮進

4.2. 如何換行

4.3. 如何給标題添加序号

4.4. 給特殊字元進行轉義

4.5. 如何進行跳轉

4.6. 如何自動生成目錄

4.7. 校驗 md 的格式

4.8. 如何浏覽 markdown 檔案

4.9. 如何修改圖檔的樣式

4.10. 如何插入音樂

4.11. 如何插入視訊

4.12. 如何自定義字型的樣式

4.13. 如何渲染 md 檔案

4.14. Typora 編輯器常用快捷鍵

4.15. 配置圖床

繼續閱讀