文章目錄

• Markdown
• • 標題
  • 字體
  • 分割線
  • 刪除線
  • 下劃線
  • 腳注
  • 列表
  • • 無序列表
    • 有序列表
    • 列表嵌套
  • 區塊
  • 代碼
  • 鏈接
  • 圖片
  • 表格
  • 高級技巧
  • • 公式
  • 如何自動產生目錄
  • 如何折疊代碼
• Typora
• • 快捷鍵
  • • 待辦事項
  • 流程圖
  • • 甘特圖
    • 時序圖

Markdown

Markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔。
Markdown 編寫的文檔可以導出 HTML 、Word、圖像、PDF、Epub 等多種格式的文檔。
Markdown 編寫的文檔后綴為 .md, .markdown。

標題

使用#號可表示1-6級標題

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

字體

*斜體文本* _斜體文本_**粗體文本** __粗體文本__***粗斜體文本*** ___粗斜體文本___

分割線

在一行中使用三個及以上的*、-、_來建立一個分割線，行內不能有其他東西，但是可以在這些符號中插入空格。

*** * * * ***** - - - --------

刪除線

~~要刪除的文字~~

下劃線

<u>帶下劃線的文本</u>

腳注

[^要注明的文本]:示例： 書籍是人類進步的階梯[^要注明的文本][^要注明的文本]: 文本解釋

aaa¹

書籍是人類進步的階梯²

列表

無序列表

使用*、+、或者-加空格

* 第一項 * 第二項 * 第三項+ 第一項 + 第二項 + 第三項- 第一項 - 第二項 - 第三項

有序列表

數字加上.

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

列表嵌套

1. 第一項-(*/+) 第一項嵌套第一個元素- 第一項嵌套第二個元素 2. 第二項- 第二項嵌套第一個元素- 第二項嵌套第二個元素* 第一項(黑色點) (三個空格)* 嵌套內容(空心點)

區塊

> 加空格

> 區塊引用

嵌套：一個>是最外層嵌套，兩個>是第一層嵌套，以此類推

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

區塊中使用列表

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

列表中使用區塊

列表內放區塊，需在>前添加一個tab鍵(4個空格)縮進

* 第一項> 區塊 * 第二項

代碼

用`包起來

`printf`函數

代碼區塊

用```包裹一段代碼

鏈接

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

高級鏈接

通過變量來設置一個鏈接，變量賦值在文檔末尾進行

[鏈接名稱][變量] 然后在文檔的結尾為變量賦值（網址） [變量]: 鏈接地址 示例： 這個鏈接用 1 作為網址變量 [Google][百度][百度]: http://www.google.com/

這個鏈接用 1 作為網址變量 Google

圖片

標題部分可選可不選，即點擊圖片顯示標題。
要指定圖片寬高，可使用<img>標簽


表格

|來分割不同單元格，-來分割表頭和其他行，:-左對齊， -: 右對齊，:-:居中對齊。

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

高級技巧

支持HTML元素

轉義：\ 轉義特殊字符

公式

使用 KaTeX 或者 MathJax 來渲染數學表達式。

數學表達式在行內顯示：$…$ 或者(…)

數學表達式在塊內顯示：$$…$$或者[…]或者```math

示例： $$ \begin{Bmatrix}a & b \\c & d \end{Bmatrix} $$

$$\left\{\begin{array}{cc}a& b\\ c& d\end{array}\right\}$$

如何自動產生目錄

在文章開始的地方輸入[toc]加Enter。

如何折疊代碼

detail：折疊語法標簽

summary：折疊語法展示的摘要

pre：以原有格式顯示元素內的文字是已經格式化的文本

code：指定代碼示例

示例： <details><summary>查看代碼</summary><pre><code> <h1>標題</h1> for i in a:print(i)</code></pre> </details>

注：這里CSDN好像顯示不出來，可以自己試試

Typora

快捷鍵

Ctrl+1 一階標題 Ctrl+B 字體加粗 Ctrl+2 二階標題 Ctrl+I 字體傾斜 Ctrl+3 三階標題 Ctrl+U 下劃線 Ctrl+4 四階標題 Ctrl+Home 返回Typora頂部 Ctrl+5 五階標題 Ctrl+End 返回Typora底部 Ctrl+6 六階標題 Ctrl+T 創建表格 Ctrl+L 選中某句話 Ctrl+K 創建超鏈接 Ctrl+D 選中某個單詞 Ctrl+F 搜索 Ctrl+E 選中相同格式的文字 Ctrl+H 搜索并替換 Alt+Shift+5 刪除線 Ctrl+Shift+I 插入圖片 Ctrl+Shift+M 公式塊 Ctrl+Shift+Q 引用注：一些實體符號需要在實體符號之前加”\”才能夠顯示

待辦事項

\ -[ ] 不勾選-待辦事項 \ -[x] 勾選-已完成事項

• 1
• 2

流程圖

橫向流程圖

示例： graph LR A[方形] -->B(圓角)B --> C{條件a}C -->|a=1| D[結果1]C -->|a=2| E[結果2]F[橫向流程圖] #mermaid-svg-rhEtWFSca8Ktc0Kf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .error-icon{fill:#552222;}#mermaid-svg-rhEtWFSca8Ktc0Kf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-rhEtWFSca8Ktc0Kf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .marker.cross{stroke:#333333;}#mermaid-svg-rhEtWFSca8Ktc0Kf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-rhEtWFSca8Ktc0Kf .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .cluster-label text{fill:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .cluster-label span{color:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .label text,#mermaid-svg-rhEtWFSca8Ktc0Kf span{fill:#333;color:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .node rect,#mermaid-svg-rhEtWFSca8Ktc0Kf .node circle,#mermaid-svg-rhEtWFSca8Ktc0Kf .node ellipse,#mermaid-svg-rhEtWFSca8Ktc0Kf .node polygon,#mermaid-svg-rhEtWFSca8Ktc0Kf .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-rhEtWFSca8Ktc0Kf .node .label{text-align:center;}#mermaid-svg-rhEtWFSca8Ktc0Kf .node.clickable{cursor:pointer;}#mermaid-svg-rhEtWFSca8Ktc0Kf .arrowheadPath{fill:#333333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-rhEtWFSca8Ktc0Kf .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-rhEtWFSca8Ktc0Kf .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-rhEtWFSca8Ktc0Kf .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-rhEtWFSca8Ktc0Kf .cluster text{fill:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf .cluster span{color:#333;}#mermaid-svg-rhEtWFSca8Ktc0Kf div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-rhEtWFSca8Ktc0Kf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} a=1 a=2 方形 圓角 條件a 結果1 結果2 橫向流程圖

豎向流程圖

示例： graph TD A[方形] --> B(圓角)B --> C{條件a}C --> |a=1| D[結果1]C --> |a=2| E[結果2]F[豎向流程圖] #mermaid-svg-KXwiex3jKuDEs4Cl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl .error-icon{fill:#552222;}#mermaid-svg-KXwiex3jKuDEs4Cl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KXwiex3jKuDEs4Cl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-KXwiex3jKuDEs4Cl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KXwiex3jKuDEs4Cl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KXwiex3jKuDEs4Cl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KXwiex3jKuDEs4Cl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KXwiex3jKuDEs4Cl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KXwiex3jKuDEs4Cl .marker.cross{stroke:#333333;}#mermaid-svg-KXwiex3jKuDEs4Cl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KXwiex3jKuDEs4Cl .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl .cluster-label text{fill:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl .cluster-label span{color:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl .label text,#mermaid-svg-KXwiex3jKuDEs4Cl span{fill:#333;color:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl .node rect,#mermaid-svg-KXwiex3jKuDEs4Cl .node circle,#mermaid-svg-KXwiex3jKuDEs4Cl .node ellipse,#mermaid-svg-KXwiex3jKuDEs4Cl .node polygon,#mermaid-svg-KXwiex3jKuDEs4Cl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-KXwiex3jKuDEs4Cl .node .label{text-align:center;}#mermaid-svg-KXwiex3jKuDEs4Cl .node.clickable{cursor:pointer;}#mermaid-svg-KXwiex3jKuDEs4Cl .arrowheadPath{fill:#333333;}#mermaid-svg-KXwiex3jKuDEs4Cl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-KXwiex3jKuDEs4Cl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-KXwiex3jKuDEs4Cl .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-KXwiex3jKuDEs4Cl .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-KXwiex3jKuDEs4Cl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-KXwiex3jKuDEs4Cl .cluster text{fill:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl .cluster span{color:#333;}#mermaid-svg-KXwiex3jKuDEs4Cl div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-KXwiex3jKuDEs4Cl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} a=1 a=2 方形 圓角 條件a 結果1 結果2 豎向流程圖

標準流程圖

示例： flowchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op Created with Rapha?l 2.3.0 開始框 處理框 判斷框(是或否?) 輸入輸出框 結束框 子流程 yes no

標準流程圖（橫向）

示例： flowchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op Created with Rapha?l 2.3.0 開始框 處理框 判斷框(是或否?) 輸入輸出框 結束框 子流程 yes no

甘特圖

示例ganttdateFormat YYYY-MM-DDtitle 軟件開發甘特圖section 設計需求 :done, des1, 2014-01-06,2014-01-08原型 :active, des2, 2014-01-09, 3dUI設計 : des3, after des2, 5d未來任務 : des4, after des3, 5dsection 開發學習準備理解需求 :crit, done, 2014-01-06,24h設計框架 :crit, done, after des2, 2d開發 :crit, active, 3d未來任務 :crit, 5d耍 :2dsection 測試功能測試 :active, a1, after des3, 3d壓力測試 :after a1 , 20h測試報告 : 48h Mon 06 Mon 13 Mon 20 需求 原型 UI設計 未來任務 學習準備理解需求 設計框架 開發 未來任務 耍 功能測試 壓力測試 測試報告 設計 開發 測試 軟件開發甘特圖

時序圖

示例： sequenceDiagram 對象A->>對象B: 對象B你好嗎?（請求） Note right of 對象B: 對象B的描述 Note left of 對象A: 對象A的描述(提示) 對象B-->>對象A: 我很好(響應) 對象A->>對象B: 你真的好嗎？ #mermaid-svg-mUgXadu85XaExa4X {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-mUgXadu85XaExa4X .error-icon{fill:#552222;}#mermaid-svg-mUgXadu85XaExa4X .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-mUgXadu85XaExa4X .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-mUgXadu85XaExa4X .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-mUgXadu85XaExa4X .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-mUgXadu85XaExa4X .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-mUgXadu85XaExa4X .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-mUgXadu85XaExa4X .marker{fill:#333333;stroke:#333333;}#mermaid-svg-mUgXadu85XaExa4X .marker.cross{stroke:#333333;}#mermaid-svg-mUgXadu85XaExa4X svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-mUgXadu85XaExa4X .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-mUgXadu85XaExa4X text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-mUgXadu85XaExa4X .actor-line{stroke:grey;}#mermaid-svg-mUgXadu85XaExa4X .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-mUgXadu85XaExa4X .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-mUgXadu85XaExa4X #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-mUgXadu85XaExa4X .sequenceNumber{fill:white;}#mermaid-svg-mUgXadu85XaExa4X #sequencenumber{fill:#333;}#mermaid-svg-mUgXadu85XaExa4X #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-mUgXadu85XaExa4X .messageText{fill:#333;stroke:#333;}#mermaid-svg-mUgXadu85XaExa4X .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-mUgXadu85XaExa4X .labelText,#mermaid-svg-mUgXadu85XaExa4X .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-mUgXadu85XaExa4X .loopText,#mermaid-svg-mUgXadu85XaExa4X .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-mUgXadu85XaExa4X .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-mUgXadu85XaExa4X .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-mUgXadu85XaExa4X .noteText,#mermaid-svg-mUgXadu85XaExa4X .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-mUgXadu85XaExa4X .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-mUgXadu85XaExa4X .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-mUgXadu85XaExa4X .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-mUgXadu85XaExa4X .actorPopupMenu{position:absolute;}#mermaid-svg-mUgXadu85XaExa4X .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-mUgXadu85XaExa4X .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-mUgXadu85XaExa4X .actor-man circle,#mermaid-svg-mUgXadu85XaExa4X line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-mUgXadu85XaExa4X :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 對象A 對象B 對象B你好嗎?（請求） 對象B的描述 對象A的描述(提示) 我很好(響應) 你真的好嗎？ 對象A 對象B

ps:數學公式和流程圖這要學習，這里是將別人的例子看懂拿來學習

---

55551 ??

xx說的 ??

總結

以上是生活随笔為你收集整理的Markdown和Typora编辑器的学习和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。