如何優雅的寫Markdown

雪亦田發表於2024-04-09

一,基本用法

1.引用

寫法:

> 第一個引用
>> 這事第二個引用
>>> 這是第三級引用

效果如下:

第一個引用

這事第二個引用

這是第三級引用

2.連結

寫法:

[這是百度的地址](http://www.baidu.com)

格式:
[name](url)

效果:

這是百度的地址

3.表格

表格使用|來分割不同的單元格,使用-來分隔表頭和其他行

  • :-:將表頭及單元格內容左對齊
  • -::將表頭及單元格內容右對齊
  • :-::將表頭及單元格內容居中

寫法:

| 專案        | 價格   |  數量  |
| --------   | -----:  | :----:  |
| 計算機     | \$1600 |   5     |
| 手機        |   \$12   |   12   |
| 管線        |    \$1    |  234  |

效果:

專案 價格 數量
計算機 $1600 5
手機 $12 12
管線 $1 234

4.腳註

使用 Markdown[1]可以效率的書寫文件, 直接轉換成 HTML[2], 你可以使用 Typora[3] 編輯器進行書寫。

腳註自動被搬運到最後面,請到文章末尾檢視,並且腳註後方的連結可以直接跳轉回到加註的地方。

二,高階用法

1.待辦事件

寫法:

- [ ] 支援以 PDF 格式匯出文稿
- [ ] 改進 Cmd 渲染演算法,使用區域性渲染技術提高渲染效率
- [x] 新增 Todo 列表功能


效果:

2.書寫公式

前提開啟Typora以下選項

image-20240409001434620

寫法:(單行的)

$$E=mc^2$$

效果:

image-20240409011400431

寫法二:(多行)

$$
E = mc^2
$$

效果:

image-20240409010655794

3.上下標的寫法

在$$外:

x^2^ 
x~2~

x2
x1

4.分數的寫法

$$
\frac{2}{3}
\frac{x+1}{y+1}
\frac{x^2}{x^y}
$$

效果:

image-20240409010728959

5.流程圖的寫法

寫法:

```flow
st=>start: Start:>https://www.zybuluo.com
io=>inputoutput: verification
op=>operation: Your Operation
cond=>condition: Yes or No?
sub=>subroutine: Your Subroutine
e=>end

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

效果:

image-20240409010753002

可參考: 流程圖語法參考

6.甘特圖

寫法:

```mermaid
    gantt
    title 專案開發流程
    section 專案確定
        需求分析       :a1, 2016-06-22, 3d
        可行性報告     :after a1, 5d
        概念驗證       : 5d
    section 專案實施
        概要設計      :2016-07-05  , 5d
        詳細設計      :2016-07-08, 10d
        編碼          :2016-07-15, 10d
        測試          :2016-07-22, 5d
    section 釋出驗收
        釋出: 2d
        驗收: 3d
```

效果:

gantt title 專案開發流程 section 專案確定 需求分析 :a1, 2016-06-22, 3d 可行性報告 :after a1, 5d 概念驗證 : 5d section 專案實施 概要設計 :2016-07-05 , 5d 詳細設計 :2016-07-08, 10d 編碼 :2016-07-15, 10d 測試 :2016-07-22, 5d section 釋出驗收 釋出: 2d 驗收: 3d

其他圖:

$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$
$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

image-20240409010850650

```mermaid
graph LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結果1]
    C -->|a=2| E[結果2]
    F[橫向流程圖]
```
graph LR A[方形] -->B(圓角) B --> C{條件a} C -->|a=1| D[結果1] C -->|a=2| E[結果2] F[橫向流程圖]
```sequence
物件A->物件B: 物件B你好嗎?(請求)
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件A->物件B: 你真的好嗎?
```

image-20240409010931072

```sequence
Title: 標題:複雜使用
物件A->物件B: 物件B你好嗎?(請求)
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件B->小三: 你好嗎
小三-->>物件A: 物件B找我了
物件A->物件B: 你真的好嗎?
Note over 小三,物件B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```

image-20240409010947573

7.巢狀html

巢狀文字寫法:

<font face="楷體" color=#00ffff size=5>改變文字格式</font>

效果:

改變文字格式

橋套框架寫法:

<iframe src="https://player.bilibili.com/player.html?cid=99269782&aid=56824180&page=1&as_wide=1&high_quality=1&danmaku=0"
			 allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

效果:

markdown可以好的巢狀html,請盡情的揮毫ba~~

9.其他公式

①高亮

==高亮== 

高亮

②根號

\sqrt{4}
\sqrt[3]{4}
\sqrt[8]{x+y}

\sqrt[4]{[(4+x)-y]}

image-20240409011040682

數學符號:

\not= 不等於 \\
\approx 約等於\\
\leq 下雨等於  \\ 
\geq  大於等於  \\
\times  乘法 \\
\div 除號  \\
\pm  正負號 \\
\sum^1_i  求和符號  \\
\sum^k_i  求和符號  \\
\prod_2^1 類乘  \\
\coprod_i^k  累除 \\ 

\overline{1+2+3+...+n}  \\

sinx \\ 
180^\circ  \\
\sin x
\sin \pi  \\
\tan x  \\ 
\infty  \\
\int^2_0  \\
\iint \\
\iiint \\
\lim_{x->0} \\
\in  \\
\notin \\ 
\supset \\
\supseteq \\
\bigcap  \\
\bigcup  \\

\log_{10} \\
\alpha  \\
\beta  \\
\gamma  \\
\delta \\
\eta  \\
\omega \\
\theta  \\
\sigma  \\
\mu  \\
\epsilon \\

\int^1_0x^2dx

\lim_{n\rightarrow+\infty}\frac{1}{n}  \\
\lim_{n\leftarrow\infty}  \\

\sum_1^n

f(x) = \frac{1}{x_1} + \frac{1}{x_2} +\cdots + \frac{1}{x_n}

image-20240409011111467

image-20240409011133172

image-20240409011144743

image-20240409011157665

更深入瞭解:

Cmd Markdown 編輯閱讀器 - 作業部落出品 (zybuluo.com)


  1. Markdown是一種純文字標記語言 ↩︎

  2. HyperText Markup Language 超文字標記語言 ↩︎

  3. NEW WAY TO READ & WRITE MARKDOWN. ↩︎

相關文章