typora

常用快捷鍵

File

Edit

Paragraph

Format

View

圖床方案

通過使用 PicGo + Gitee 的方式實現(xiàn)圖床方案。

PicGo

• PicGo 官方網站
• 相關插件
  • gitee ： 支持 gitee 圖床配置
  • super-prefix： 支持自定義上傳路徑規(guī)則
  • 更多插件：Awesome-PicGo

Gitee

• 使用 Gitee 的公開倉庫作為圖片存儲位置
• 注意：單個圖片大小不要超過 1M 。

Markdown 文檔規(guī)范

Google

文檔布局

# 文檔標題

簡短介紹.

[TOC]

## 主題

內容.

## 參考文檔

* https://link-to-more-info

1. 文檔標題：第一個標題應該是一級標題，理想情況下應該與文件名相同或幾乎相同。第一級標題用作頁面 <title> 。
2. 簡短介紹：用 1 ~ 3 句話介紹一下文檔的主題。
3. TOC: 如果您使用支持目錄的托管，請在簡短介紹后放置 [TOC]。

字符行限制

尾隨空格

不要使用尾隨空格，用尾隨的反斜杠代替。

標題

ATX 風格的標題。

在 # 后加空格，并和上下文保持間隔。

列表

• 對長列表使用懶人編號法。
• 嵌套列表間距
  • 嵌套列表時，對數字開頭的列表和星號開頭的列表都使用四個空格的縮進

代碼

• 單行代碼
• 代碼塊
  • 代碼超過一行時，請使用代碼塊
  • 語言聲明
  • 縮進代碼
  • 避免換行
  • 列表內嵌套代碼塊
    • 使用縮進來確保它不會破壞列表

超鏈接

盡可能縮短你的鏈接。使用具有提示性的超鏈接標題。

圖片

少用圖片，純文本可以使用戶更快地進行交流，較少讀者的分心和作者的拖延。但是，有時圖片利于表達。

List 優(yōu)于 Tables

Markdown 優(yōu)于 HTML

使用 Markdown 畫圖

Sequence

該圖形繪制是基于 js-sequence 。

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Flowcharts

該圖形繪制是基于 flowchart.js 。

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

Mermaid

該特性是基于 mermaid 實現(xiàn)。

流程圖

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

時序圖

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

甘特圖

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

類圖

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Meramid 支持很多其他類型的圖，可以通過官網了解其語法規(guī)則。

參考文檔

• Google Markdown 文檔風格指南
• Markdown 編寫規(guī)范
• 使用 Markdown 繪圖