Markdown指南


Markdown簡介

Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式。
可查看【百度百科】深入了解。也可以查閱【官方文檔】進行學習。
本博文的原文可以點擊下載,然后復制到自己發布博客園Markdown文章,轉載請注明本文地址。

標題

    對於博客園文章,建議從"##"這種二級標題開始,看起來比較美觀。在Markdown首行填寫[toc]即可自動識別#號的標題作為目錄

[toc]
# 這是 H1
## 這是 H2
### 這是 H3
#### 這是 H4
##### 這是 H5
###### 這是 H6

最多6級標題

段落

段落換行

  • 行尾添加兩個以上空格加換行符實現。
  • 用一個空行簡單的將兩段落隔開。
  • 可以輸入<br/>實現換行。

段落縮進

  • &emsp;來表示一個全角空格。
  • &ensp;表示一個半角空格。
  • &nbsp;表示行中間的空格。

字體格式

  • 斜體文本,*斜體文本*斜體文本;或者<i>斜體文本</i>斜體文本;或者<em>斜體文本</em>斜體文本
  • 粗體文本,**粗體文本**粗體文本。或者<b>粗體文本</b>粗體文本
  • 粗斜體文本,***粗斜體文本***粗斜體文本
  • 分割線,一行中用三個以上的星號、減號、底線來建立一個分隔線。

  • 可以使用<font color=#db3737 size=3>文字</font>來定義文字的大小和顏色。文字
  • 刪除線,~~刪除線~~刪除線。或者用<s>刪除線</s>刪除線
  • 下划線,<u>下划線</u>下划線
  • 文本居中,<center>居中文本</center>
    居中文本
    。注意,在使用center后的文本獨占一行。
  • 腳注,首先要定義腳注: "[^LABEL]: ",在引用處使用[^LABEL]即可[1]
創建腳注格式類似這樣 [^janbar]。

[^janbar]: 記錄生活的美好!

插入鏈接

普通鏈接

鏈接使用方法如下:

[鏈接名稱](鏈接地址)
或者
<鏈接地址>

    例如:

這是一個鏈接 [點擊跳轉](https://www.cnblogs.com/janbar)

    效果如下:
這是一個鏈接 點擊跳轉

    直接使用鏈接地址:

<https://www.baidu.com>
<address@example.com>

    效果如下:
https://www.baidu.com
address@example.com

高級鏈接

    我們可以通過變量來設置一個鏈接,變量賦值在文檔末尾進行:

這個鏈接用 1 作為網址變量 [Google][1]
這個鏈接用 janbar 作為網址變量 [Janbar][janbar]
然后在文檔的結尾為變量賦值(網址),記得文末加空行和前2個空格。
.
[1]: http://www.google.com/
[janbar]: https://www.cnblogs.com/janbar

    效果如下:
這個鏈接用 1 作為網址變量 Google
這個鏈接用 janbar 作為網址變量 Janbar

插入圖片

  • 借助 Markdown 提供的 alt 標簽實現:![alt 屬性文本](圖片地址 "可選標題" =30x30) 可選標題項可省略,最后的表達式可以限定圖片大小。
  • 借助 html 提供的 <img> 標簽實現: <img src="圖片地址" width="50%"></img>,可以添加 img 標簽支持的樣式及屬性。
  • 借助 html 提供的 <img> 標簽和 <div> 標簽實現圖片居中。
  • 當然,你也可以像插入高級鏈接那樣對圖片網址使用變量,在文末放上鏈接就行。

插入代碼塊

  • 行內插入某個函數或這一行代碼,用"`"括起來即可。我一般也用這個當做着重符,重點突出某些文字。

  • 一整塊代碼,可以在每行代碼前加4個空格或1個tab。注意:起止行要與其他部分加空行隔開。

    #include <stdio.h>
    int main(int argc,char *argv[])
    {
            return 0;
    }
    
  • 使用兩行三個"`"把代碼包括起來,帶上代碼語言,有些Markdown解釋器會根據語言不同而進行不同的渲染。我一般都是用這個

```c
#include <stdio.h> int main(int argc,char *argv[]) { return 0; } ```

插入表格

基礎用法

    Markdown 制作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。語法格式如下:

|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |

    以上代碼顯示結果如下:

表頭 表頭 表頭
單元格 單元格 單元格
單元格 單元格 單元格

對齊方式

  • -: 設置內容和標題欄居右對齊。
  • :- 設置內容和標題欄居左對齊。
  • :-: 設置內容和標題欄居中對齊。

    實例如下:

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格11111111111111 | 單元格222222222222222222 | 單元格33333333333333333 |
| 單元格11111111111111 | 單元格222222222222222222 | 單元格33333333333333333 |

    效果如下:

左對齊 右對齊 居中對齊
單元格11111111111111 單元格222222222222222222 單元格33333333333333333
單元格11111111111111 單元格222222222222222222 單元格33333333333333333

插入區塊

基礎用法

    如下格式用">"加空格實現。可以用多個嵌套區塊。

> 最外層
> > 第一層嵌套
> > > 第二層嵌套

    效果如下:

最外層

第一層嵌套

第二層嵌套

區塊中使用列表

> 區塊中使用列表
> 1. 第一項
> 2. 第二項
> + 第一項
> + 第二項
> + 第三項

    效果如下:

區塊中使用列表

  1. 第一項
  2. 第二項
  • 第一項
  • 第二項
  • 第三項

列表中使用區塊

  • 第一項
    > 技術大佬
    > 學的不僅是技術更是夢想
  • 第二項

    效果如下:

  • 第一項

    技術大佬
    學的不僅是技術更是夢想

  • 第二項

插入列表

無序列表

    無序列表使用星號(*)、加號(+)或是減號(-)作為列表標記,這些標記后面要添加一個空格,然后再填寫內容:

* 第一項
* 第二項
* 第三項

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

- 第一項
- 第二項
- 第三項

    效果如下:

  • 第一項
  • 第二項
  • 第三項
  • 第一項
  • 第二項
  • 第三項
  • 第一項
  • 第二項
  • 第三項

有序列表

    有序列表使用數字並加上 . 號來表示,如:

  1. 第一項
  2. 第二項
  3. 第三項

    效果如下:

  1. 第一項
  2. 第二項
  3. 第三項

列表嵌套

    列表嵌套只需在子列表中的選項前面添加四個空格即可:

  1. 第一項:
    - 第一項嵌套的第一個元素
    - 第一項嵌套的第二個元素
  2. 第二項:
    - 第二項嵌套的第一個元素
    - 第二項嵌套的第二個元素

    效果如下:

  1. 第一項:
    • 第一項嵌套的第一個元素
    • 第一項嵌套的第二個元素
  2. 第二項:
    • 第二項嵌套的第一個元素
    • 第二項嵌套的第二個元素

插入待辦

    已經驗證博客園的Markdown不支持如下待辦樣式。但是像GitHub上是可以使用如下樣式的。

- [ ] 未完成
- [x] 已完成

    實際效果如下:

隱藏內容

    當需要隱藏內容,點擊箭頭才能展開進行展示,可以使用如下方法。

<details>
<summary>點此展開格式化示例。</summary>
<br>
展示內容
</details>

    實際效果如下:

點此展開格式化示例。
展示內容

高級技巧

HTML 元素

不在 Markdown 涵蓋范圍之內的標簽,都可以直接在文檔里面用 HTML 撰寫。
目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦

    顯示結果如下:
使用 Ctrl+Alt+Del 重啟電腦

轉義

    Markdown 使用了很多特殊符號來表示特定的意義,如果需要顯示特定的符號則需要使用轉義字符,Markdown 使用反斜杠轉義特殊字符:

文本加粗
\*\* 正常顯示星號 \*\*

    Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號:

\ 反斜線
` 反引號
* 星號
_ 下划線
{} 花括號
[] 方括號
() 小括號
# 井字號
+ 加號
- 減號
. 英文句點
! 感嘆號

公式

    當你需要在編輯器中插入數學公式時,可以使用兩個美元符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。提交后,問答和文章頁會根據需要加載 Mathjax 對數學公式進行渲染。如:

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

    效果如下:

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} ${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} \]

甘特圖

```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 現有任務
已完成 :done, des1, 2014-01-06,2014-01-08
進行中 :active, des2, 2014-01-09, 3d
計划中 : des3, after des2, 5d
```

    效果如下:

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section 現有任務 已完成 :done, des1, 2014-01-06,2014-01-08 進行中 :active, des2, 2014-01-09, 3d 計划中 : des3, after des2, 5d

UML 圖

```mermaid
sequenceDiagram
張三 ->> 李四: 你好!李四, 最近怎么樣?
李四-->>王五: 你最近怎么樣,王五?
李四--x 張三: 我很好,謝謝!
李四-x 王五: 我很好,謝謝!
Note right of 王五: 李四想了很長時間, 文字太長了
不適合放在一行.

李四-->>張三: 打量着王五...
張三->>王五: 很好... 王五, 你怎么樣?
```

    效果如下:

sequenceDiagram 張三 ->> 李四: 你好!李四, 最近怎么樣? 李四-->>王五: 你最近怎么樣,王五? 李四--x 張三: 我很好,謝謝! 李四-x 王五: 我很好,謝謝! Note right of 王五: 李四想了很長時間, 文字太長了<br/>不適合放在一行. 李四-->>張三: 打量着王五... 張三->>王五: 很好... 王五, 你怎么樣?

Mermaid流程圖

```mermaid
graph LR
A[長方形] -- 鏈接 --> B((圓))
A --> C(圓角長方形)
B --> D{菱形}
C --> D
```

    效果如下:

graph LR A[長方形] -- 鏈接 --> B((圓)) A --> C(圓角長方形) B --> D{菱形} C --> D

Flowchart流程圖

```mermaid
flowchat
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
cond=>condition: 確認?

st->op->cond
cond(yes)->e
cond(no)->op
```

    效果如下:

flowchat st=>start: 開始 e=>end: 結束 op=>operation: 我的操作 cond=>condition: 確認? st->op->cond cond(yes)->e cond(no)->op

類圖

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
< > Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
>>service>>
int id
size()
}
```

    效果如下:

classDiagram Class01 <|-- AveryLongClass : Cool <<interface>> Class01 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { >>service>> int id size() }

插入svg

眾所周知Markdown支持嵌入html元素,那么svg文本也是支持的,下面就嵌入一個圓形的svg圖片。

<div width="100%" style="overflow-x: auto;">
  <svg width="140" height="170">
    <title>SVG Sample</title>
    <desc>This is a sample to use SVG in markdown on the website cnblogs.</desc>
    <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
  </svg>
</div>

    效果如下:

SVG Sample This is a sample to use SVG in markdown on the website cnblogs.

腳注


  1. 記錄生活的美好! ↩︎


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM