天天看點

簡書 Markdown 文法詳解一級标題

注: 文章摘自 白老師課堂 - 簡書

一、區塊标記

區塊标記:是指内容獨占一塊,需前後換行,不和其他标記共處一行的标記

1. 段落

段落:即是一段連續的文字,可包含 * 、空格、換行、tab 等字元。兩個段落之間使用空行分隔

示例代碼

第一自然段

第二自然段
           

效果

第一自然段

第二自然段

注意:換行不是分段的辨別,空行才是

2. 标題

标題:代表了文章中主題的層次,比如:文章标題使用一級标題,回目名稱使用二級标題,小節使用三級标題,依次類推。主題的層次代表了文章的大綱

文法:Markdown 中使用連續 n(1-6) 個 "#" 分别表示第 n 級标題, "#" 和後續内容之間應放置一個空格

# 一級标題
## 二級标題
### 三級标題
#### 四級标題
##### 五級标題
###### 六級标題
           

一級标題

二級标題

三級标題

四級标題

五級标題
六級标題

3. 清單

清單:就是一組相關資訊的集合

  • 有序清單

文法:使用 "(數字)" 和 "." 作為項目符号,項目符号和正式清單項目之間有一個空格

1. 步驟一
2. 步驟二
3. 步驟三
           
  1. 步驟一
  2. 步驟二
  3. 步驟三
  • 無序清單*

文法:使用 "+" 作為項目符号,項目符号和正式清單項目之間有一個空格

+ 一級目錄
  + 二級目錄
    + 三級目錄
      + 四級目錄
+ 一級目錄
  + 二級目錄
  + 二級目錄
    + 三級目錄
           
  • 一級目錄
    • 二級目錄
      • 三級目錄
        • 四級目錄

注意

  • 無序清單的符号可使用 *,+,- 效果是相同的
  • 每一層級目錄 (第一層級除外) 前面應相對于上一層級添加一個 tab 或兩個空格, 以便區分等級

4. 分割線

文法:至少使用 3 個連續的 * 即可得到一個分割線

***
           

5. 引用

文法:在行頭加上 ">" 即可, ">" 和後續内容之間有一個空格

> 引用
           
引用
  • 可以在每行之前加 ">" ,也可以在段落之前加 1 個 ">"
  • 引用内部可以使用其他 Markdown 标記

二、行内标記

行内标記和其他标記共處一行

1. 強調文字

  • 斜體

文法:内容前後各1個 "*"或"_"

*斜體*
_斜體_
           
  • 粗體

文法:内容前後各2個 "*"或"_"

**粗體**
__粗體__
           
  • 删除文字

文法:内容前後各2個 "~"

~~删除~~
           
删除
  • 粗斜體

文法:内容前後各2個 "" 和1個"_" 或 1個 ""和2個"_" (左右要對稱)

_**粗斜體**_
*__粗斜體__*
**_粗斜體_**
__*粗斜體*__
           

2. 圖檔

  • 行内圖檔

圖檔和圖檔位址寫在一起

文法:

[圖檔上傳失敗...(image-b2fafa-1534418374184)]

![簡書 LOGO](https:https://yqfile.alicdn.com/img_dcb5040cb72f24cf921590c6ad49ae6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
           
簡書 LOGO
  • 在簡書中,圖檔可以直接拖到編輯區,會自動上傳圖檔并生成圖檔位址; 也可以右鍵 (Ctrl + V) 直接粘貼
  • "[]" 方括号裡的内容可以不寫
  • 引用圖檔

圖檔和圖檔位址分開書寫

![圖檔标題][圖檔 id]

(空行)

[圖檔 id]:圖檔 url

![簡書 LOGO][jianshu]

[jianshu]:https:https://yqfile.alicdn.com/img_dcb5040cb72f24cf921590c6ad49ae6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
           
  • 引用圖檔的 id 在文章中必須唯一
  • 名稱和路徑之間至少空一行
  • 圖檔名稱 (第一對"[]"内容) 可以不寫
  • 連結 id 可使用字母、數字、空格和下劃線等,不區分大小寫

3. 連結

  • 行内連結

連結和位址寫在一起

[連結名稱](連結位址 url "連結title")

[小賢筆記](https://www.jianshu.com/u/195a91a868f5)
           
小賢筆記
  • 引用連結

連結和位址分開書寫

[連結名稱][連結id]

(空行)

[連結id]:連結 url 位址 "連結 title"

[小賢筆記][xxbj]

[xxbj](https://www.jianshu.com/u/195a91a868f5)
           
  • 自動連結

一種簡明的連結書寫方式

<連結位址>

<https://www.jianshu.com/u/195a91a868f5>
           
https://www.jianshu.com/u/195a91a868f5

4. 腳注

為名詞提供注釋,注釋将顯示在文章末尾

待解釋文字[^腳注 id]

[^腳注 id]:注釋内容

Hello World[^hello]
[^hello]:你好, 世界
           
Hello World [1] (第二行的内容在文章最底部)

注意事項

  • 腳注 id 必須唯一
  • 無論腳注 id 如何起名,顯示時一律标為數字,并且按出現順序排列
  • 翻譯的内容會自動跳到文章末尾

三、代碼塊

行内代碼塊

文法:使用兩個 "`"(esc 下面的那個鍵) 将代碼包含起來

`Hello World`
           

Hello World

多行代碼塊

文法:隻需要每行都縮進 4 個空格即可,或者使用```框起來

  • 方法1: 每前面增加兩個 tab 或 4個空格
function() {
        alert("Hello, world")
    }
           
function() {
        alert("Hello, world")
    }
           
  • 方法2: 代碼上下用 ```(esc 下面的鍵) 框起來
... // ← esc 下面的鍵, 由于顯示問題, 這裡用 "." 代替
function() {
    alert("Hello, world")
}
... // ← esc 下面的鍵, 由于顯示問題, 這裡用 "." 代替
           
  • 在代碼區塊内部,Markdown 标記失效,比如:+ 就是 + ,不被解釋為特殊标記

四、表格

  • 第一行為表頭,第二行分隔表頭和主體部分,第三行開始每一行為一個表格行
  • 列于列之間用管道符 "|" 隔開, 表格每一行兩邊的管道符可省略
  • 第二行還可以為不同的列指定對齊方向, 預設為左對齊;在 "-" 左邊加上 ":" 就是左對齊;在 "-" 右邊加上 ":" 就是右對齊;在 "-" 兩邊都加上 ":" 就是居中對齊
|姓名|年齡|性别|身高(cm)|
|-|:-|:-:|-:|
|張三|22|男|180|
|李四|18|女|165|
           
姓名 年齡 性别 身高(cm)
張三 22 180
李四 18 165

五、其他問題

1. Markdown 與 HTML 的關系

  • HTML 是一種釋出的格式,Markdown 是一種書寫的格式
  • Markdown 的格式文法隻涵蓋純文字可以涵蓋的範圍
  • 在 Markdown 中可直接使用 HTML 标簽,但需要注意
    • 對于 HTML 區塊元素――如 div、table、pre、p 等标簽,必須在前後加上空行與其它内容區隔開,還要求它們的開始标簽與結尾标簽不能用制表符(tab)或空格來縮進
    • HTML 的行内标簽——如 span、cite、del 可以在 Markdown 的段落、清單或是标題裡随意使用
    • 在 HTML 的區塊标簽中的 Markdown 标簽是沒有效果的

2. 特殊字元的自動轉換

  • 在 HTML 檔案中,有兩個字元需要特殊處理: < 和 &,必須使用轉義字元:& lt ; 和 & amp
  • Markdown 中,你可以自由的書寫 < 和 &,編輯器會智能的進行判斷:當這些符号用于 HTML 标簽中,他們将保留原型;當他們單獨使用時,将會轉換為字元實體
  • 在代碼塊中,它們将統統被轉換為字元實體,即原樣顯示

3. Markdown 中的轉義字元

Markdown 中,如需顯示有特定意義的符号,如:*,# 等,可使用 反斜杠 \ 進行轉義。可對如下字元進行轉義:

*
`
*
_
{}
()
#
+
-
.
!  
           

六、簡書尚不支援的标記和不足

  • 用于生成目錄索引的 [TOC]
  • 用于說明文章标簽的 tags
  • 定義清單和待辦事宜 Todo 清單
  • 數學公式
  • 各種圖形:流程圖、時序圖、甘特圖
  • 其他技術,如:{mermaid}
  • 區塊代碼中不顯示行号
  1. 你好, 世界

繼續閱讀