快速入門上手Markdown

第一次接觸Markdown是寫代碼初期看很多大佬的github，他們的項目一定會有一份文件叫Readme.md的文件
他們由一些簡單美觀的符號和漢字字母組成，編譯之后成為一篇簡單直觀的文檔
深入了解之后我才知道，原來還有這樣一種神奇的標記語言，可以寫出這么好看的文檔

當然，在我們記錄一些技術文檔或者寫技術博客的時候，也經常會頭疼，如何寫一篇技術文檔，能夠同時以美觀的格式發布到多個博客平臺呢？

Markdown就可以解決我們快速書寫和多個平臺適配的痛點，他可以用一些簡單的標記符，來格式化你的文檔，并且保證不同平臺統一的格式

當然，由于各個平臺的Markdown解析器的配置不同，解析后的一些樣式，比如字體粗細，超鏈接顏色，代碼塊顏色之類的，可能會稍有不同

可以說，Markdown就是為簡單而生

什么是Markdown？

  1. Markdown是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔
  2. 他是由John Gruber在2004年發明創建
  3. 由Markdown編寫的文檔可以導出HTML 、Word、圖像、PDF、Epub等多種格式的文檔
  4. Markdown編寫的文檔后綴為.md或.markdown`
  5. 注意!!!Markdown支持部分Html的語法，部分展示復雜的內容可以用Html代碼來寫

Markdown編輯器的選擇

因為我個人是從js開始接觸代碼世界，所以我選擇的第一個編輯器是Hbuilder（注意官網已經不提供更新版本下載），
不過目前它已經升級版本到HbuilderX，這不是一個專門的Markdown編輯器，
但是他的內部集成了插件具有直接編寫Markdown的功能，就我個人而言我覺得非常適合寫Markdown文檔，不僅不耽誤寫代碼，
而且它的Markdown文本標注的顏色非常符合我的審美。當然蘿卜青菜各有所愛，還有以下一些Markdown編譯器大家都可以試試

  1. 各大博客網站的編寫都是支持Markdown語法的，所以可以直接在網站上寫，如：github，csdn，開源中國，掘金，思否之類的平臺
  2. 專門的Markdown編輯器，如：

    Mou
    MarkdownPad
    Typora
    Atom
    Haroopad
    SublimeText
    Cmd Markdown
    Byword
    CuteMarkEd
    Dillinger
    EpicEditor
    MarkdownEditor
    MarkPad
    Marxico

  3. 最后，大部分的編譯器都是可以安裝Markdown編譯器插件的，所以基本上可以直接在寫代碼的同時用Markdown寫寫技術文章哦

我常用的一些語法

注意!!!這里是我自己平時寫文檔和技術博客常用的一些Markdown標記，標注為我自己寫文檔使用的位置，不是這個標記的官方定義

# 大標題  
### 段落標題  
#### 特殊tip（會加粗成為目錄中的標題，慎用，我是因為橘黃色才用這個作tip）
1. 有序列表  
+ 無序列表  
> 引用（需要垂直連續使用）
*文字* 傾斜
**文字** 加粗
***文字*** 加粗傾斜
[外部鏈接標題](外部鏈接地址 "標題") 外部鏈接，標題就是類似腳注，鼠標懸浮后顯示的文字  
`單行代碼` 行內代碼塊   
```*2 多行代碼塊（注意這里是兩排```，中間寫代碼即可）
[錨鏈接標題](#錨鏈接id) +  <span id="#錨鏈接id"></span>  組合使用可以完成錨鏈接，在當前文章內跳轉到指定位置

Markdown語法大全

  1. 標題
  2. 段落
  3. 列表
  4. 引用
  5. 代碼
  6. 鏈接
  7. 圖片
  8. 表格
  9. 其他

<span id="jumpId-title"></span>

標題

  1. 主要是用來寫整個文檔的目錄結構的，需要注意的是各級標題的字體大小對應h1-h6
  2. 可以用下劃線突出一下標題，不過我本人不喜歡這么標記，根據字符數量不同，標記線的長度不同
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題
---- 標記線

<span id="jumpId-p"></span>

段落

  1. 在文字的末尾添加兩個空格或者下一行空一行，都可以實現換行
  2. 使用*或者_組合來實現加粗或者傾斜
*斜體文本*
_斜體文本_
**粗體文本**
__粗體文本__
***粗斜體文本***
___粗斜體文本___
  1. 使用下面這些符號都可以建立分割線，根據符號數量不同分割線長度不同
***
* * *
*****
- - -
----------
  1. 在文字的前后加上~或者~~可以實現刪除線
~需要標注刪除線的文字~
~~需要標注刪除線的文字~~
  1. 讓文字擁有腳注，就是鼠標懸浮之后顯示的文字
[^需要注明的文字]: 懸浮后顯示的文字

<span id="jumpId-list"></span>

列表

  1. 有序列表，直接用1. 2. 3.按順序標注下去即可，注意是數字加. 
1. 第一項
2. 第二項
3. 第三項
  1. 無序列表，使用*或者+或者-按順序標注下去即可
* 第一項
* 第二項
* 第三項

+ 第一項
+ 第二項
+ 第三項

- 第一項
- 第二項
- 第三項
  1. 嵌套列表，列表嵌套只需在子列表中的選項前面添加四個空格即可。注意列表下也可以使用>來引用相關內容，注意引用換行需要在末尾加兩個空格哦
1. 第一項：
    * 第一項嵌套的第一個元素  
    * 第一項嵌套的第二個元素  
2. 第二項：
    + 第二項嵌套的第一個元素  
    + 第二項嵌套的第二個元素  
3. 第三項
    - 第三項嵌套的第一個元素  
    - 第三項嵌套的第二個元素  
4. 引用內容
    > 引用一（注意如果要換行就加兩個空格，默認是不換行，會自動把下面引用內容拼接過來）
    > 引用二

<span id="jumpId-use"></span>

引用

  1. 在段落開頭添加>，然后和段落之間要空一個空格。默認不換行，換行需要在末尾添加兩個空格。支持嵌套
> 引用一  
> 引用二  
> 引用三  

> 最外層
> > 第一層嵌套
> > > 第二層嵌套
  1. 區塊中使用列表和列表中使用區塊參考上一節末尾
> 區塊中使用列表
> 1. 第一項
> 2. 第二項
> + 第一項
> + 第二項
> + 第三項

* 列表中使用區塊
* 第一項
    > 引用一  
    > 引用二  
* 第二項

<span id="jumpId-code"></span>

代碼

  1. 如果是段落上的一個函數或片段的代碼可以用反引號把它包起來（`）(貌似沒法用兩個反引號把一個反引號寫成代碼片段？HbuilderX親測不支持)
`code()` 函數
  1. 代碼區塊可以使用4個空格或者一個制表符 <kbd>Tab</kbd>鍵）即可。也可以使用兩個（```）包裹一段代碼，這樣更為醒目，
    我經常使用，并且你可以指定代碼的語言，也可以不指定
// 這里用括號包裹防止誤認為代碼塊  
(```)javascript
$(document).ready(function () {
    alert('RUNOOB');
});
(```)

<span id="jumpId-link"></span>

鏈接

  1. 普通鏈接，直接按下方格式書寫，有完整格式和簡介格式
// 完整格式，可以重命名，另外可選外加標題，標題可以不寫，標題類似腳注，懸浮顯示文字  
[鏈接名稱](鏈接地址 "鏈接標題")

// 簡潔格式
<鏈接標題>
  1. 高級鏈接，我們可以通過變量來設置一個鏈接，變量賦值在文檔末尾進行
這個鏈接用 1 作為網址變量 [Google][1]
這個鏈接用 abc123 作為網址變量 [Baidu][abc123]
這個鏈接用 runoob 作為網址變量 [Runoob][runoob]
然后在文檔的結尾為變量賦值（網址）

  [1]: http://www.google.com/
  [abc123]: http://www.baidu.com/
  [rb]: http://www.rb.com/

<span id="jumpId-picture"></span>

圖片

  1. 基本語法，直接按照下方格式書寫
[圖片上傳失敗...(image-440225-1634889949303)]
[圖片上傳失敗...(image-c0d9a0-1634889949303)]
  1. 高級語法，像網址那樣使用變量
這個鏈接用 a 作為網址變量 [RB][a].
然后在文檔的結尾為變量賦值（圖片地址或圖片網址）

  [a]: 圖片地址或圖片網址
  1. 沒有辦法指定圖片的高度與寬度，如果你需要的話，你可以使用普通的<img>標簽
<img src="" width="50%">

<span id="jumpId-table"></span>

表格

  1. 制作表格使用|來分隔不同的單元格，使用-來分隔表頭和其他行
|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |
  1. 我們可以設置表格的對齊方式
    • -: 設置內容和標題欄居右對齊
    • :- 設置內容和標題欄居左對齊
    • :-: 設置內容和標題欄居居中對齊
| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
  1. 復雜表格，如需要合并表頭之類的，可以直接使用Html中提供的表格
<table>
    <tr>
        <th colspan="3">js-pratice</th>
    </tr>
    <tr>
        <th>一級目錄</th>
        <th>二級目錄</th>
        <th>描述</th>  
    </tr >
    <tr >
        <td rowspan="3">Array</td>
        <td>Basic</td>
        <td>數組基本操作</td>
    </tr>
    <tr>
        <td>Repeat</td>
        <td>數組去重操作</td>
    </tr>
    <tr>
        <td>Sort</td>
        <td>數組排序操作</td>
    </tr>
    <tr>
        <td >Date</td>
        <td>Date</td>
        <td>日期對象操作</td>
    </tr>
    <tr>
        <td >Inherit</td>
        <td >Inherit</td>
        <td >繼承對象操作</td>
    </tr>
    <tr>
        <td >Promise</td>
        <td >Promise</td>
        <td >Promise對象操作</td>
    </tr>
</table>

<span id="jumpId-other"></span>

其他

  1. 支持Html代碼

    例如：Html轉義字符在行首添加空格來實現，&ensp;代表半角空格，&emsp;代表全角空格
    例如：借助<br/>來在表格中實現換行

  2. 用\包裹來轉義
  3. 部分高級Markdown編輯器支持使用$$包裹來使用數學公式
  4. 部分高級Markdown編輯器支持流程圖的編譯和展示

參考文檔一 ———— 菜鳥教程 Markdown 教程
參考文檔二 ———— 幾款主流好用的markdown編輯器介紹
參考文檔三 ———— 關于 Markdown 的一些奇技淫巧

我是 fx67ll.com，如果您發現本文有什么錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~ :)
轉發請注明參考文章地址，非常感謝！！！

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容