一以貫之的努力，不得懈怠的人生，每天的微小積累，實現夢想奧里給！

文章目錄

• 前言
• 一、Markdown是什么？
• 二、使用方法
• • 1.標題
  • 2.文本格式
  • 3.列表
  • 4.插入鏈接與圖片
  • 5.代碼片
  • 6.表格
  • 7.注釋注腳
  • 8.數學公式
  • 9.甘特圖
  • 10.UML圖
  • 10.Mermaid流程圖
  • 11.Flowchart流程圖
  • 12.classDiagram類圖
• 總結

---

前言

感言：第一次寫博客，感覺有點驚奇，以為要先學Markdown和Latex等各種語法啥的，但真正點進去才發現并沒那么麻煩，就像查著字典寫作文基本上手即入門，于是本文就大致總結一些破站學的markdown語法。

如下圖所示，這字典很是全面，需要啥有啥，盡管按自己的想法總結表達自己的所學所感！

---

提示：以下為本篇文章正文內容，歸結為參考學習總結筆記

一、Markdown是什么？

Markdown 一種語法簡單卻能寫出令人舒心效果文章的語言，隨便學個8分鐘就夠，淦就完事。（個人認為也算是一種格式整理方法，優點巨多應用廣泛，個人財富積累第一步，沖！）

二、使用方法

1.標題

• 老大一個 # 統領
• 下級需 # 逐級增多（▲）
• 快捷鍵：Ctrl + Shift + H

如圖所示：

2.文本格式

• 斜體：文本前后加 一個星號 * 或者一個下劃線 _
  快捷鍵：Ctrl + I
• 粗體：前后加兩個星號 ** 或者兩個下劃線 __（加粗得加錢）
  快捷鍵：Ctrl + B
• 粗斜體：前后加三個星號 *** 或者三個下劃線 ___（加）
  快捷鍵：前二加法使用

---

• 分割線：一行中用3個下劃線 --- 或星號 *** 來建立一個分割線

---

• 標記文本：前后添兩個等號 ==
• 刪除文本：前后添兩個等號 ~~

• 引用文本：文本 前 添一個 >

• 下劃線： <u>文本</u>

如圖所示：

3.列表

• 無序列表: 使用星號 * 、加號 + 或是減號 -，再加一個空格作為列表標記；
  快捷鍵：Ctrl + Shift + U
• 有序列表: 使用數字并加上 . 號，再加一個空格作為列表標記；
  有序（Order）：Ctrl + Shift + O
• • 復選框：使用星號 - [ ] 、加號 - [x] 前綴實現 todo-List 如下所示：
    • 完成任務

如圖所示：

4.插入鏈接與圖片

鏈接:[鏈接名稱](鏈接地址) or <鏈接地址> link.

圖片:

帶尺寸的圖片（··· =長x寬）:

居中的圖片（··· #pic_center）:

居中并且帶尺寸的圖片（··· #pic_center =長x寬）:
如圖所示：

5.代碼片

• 段落上一行與下一行加 三個反引號 ` 效果如下

yin yong `printf()` dai ma // A code block var foo = 'bar';

• 第一行反引號后表示代碼塊所使用的語言，效果如下

// An highlighted block .javascript var foo = 'bar';

如圖所示：

6.表格

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

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

示例：

第一列第二列第三列

:-	:-:	-:
居左	居中	居右
加了一行	豎線	上一行

如圖所示：

7.注釋注腳

注釋：[注釋文本]：解釋

• Markdown將文本轉換為 HTML。

注腳：[文本](腳注解釋"腳注名字")

• 一個具有注腳的文本。[^1]

8.數學公式

參考文檔
$\begin{array}{rl}\sin 2\theta & =2\sin \theta \cos \theta \\ & =\frac{2\tan \theta }{1+{\tan }^2\theta }\end{array}$
$$f(x)=\{\begin{array}{ll}\lambda e^{?\lambda x},& x>0\\ 0,& 其它\end{array}(\lambda >0)$$
$A_{m,n}=?\begin{array}{cccc}{a}_{1,1}& a_{1,2}& ?& a_{1,n}\\ a_{2,1}& a_{2,2}& ?& a_{2,n}\\ ?& ?& ?& ?\\ a_{m,1}& a_{m,2}& ?& a_{m,n}\end{array}?$

$H{g}^2+?>[I?]HgI2?>[I?][H{g}^{II}I4{]}^2?$(化學公式出了點問題)^1

參考圖例：

9.甘特圖

參考文檔

Mon 06Mon 13已完成 進行中 計劃中 現有任務Adding GANTT diagram functionality to mermaid

10.UML圖

#mermaid-svg-ulRzvvAnxLXfLVGR {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR .error-icon{fill:#552222;}#mermaid-svg-ulRzvvAnxLXfLVGR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ulRzvvAnxLXfLVGR .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ulRzvvAnxLXfLVGR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ulRzvvAnxLXfLVGR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ulRzvvAnxLXfLVGR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ulRzvvAnxLXfLVGR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ulRzvvAnxLXfLVGR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ulRzvvAnxLXfLVGR .marker.cross{stroke:#333333;}#mermaid-svg-ulRzvvAnxLXfLVGR svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ulRzvvAnxLXfLVGR .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ulRzvvAnxLXfLVGR text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-ulRzvvAnxLXfLVGR .actor-line{stroke:grey;}#mermaid-svg-ulRzvvAnxLXfLVGR .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR .sequenceNumber{fill:white;}#mermaid-svg-ulRzvvAnxLXfLVGR #sequencenumber{fill:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR .messageText{fill:#333;stroke:#333;}#mermaid-svg-ulRzvvAnxLXfLVGR .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ulRzvvAnxLXfLVGR .labelText,#mermaid-svg-ulRzvvAnxLXfLVGR .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-ulRzvvAnxLXfLVGR .loopText,#mermaid-svg-ulRzvvAnxLXfLVGR .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-ulRzvvAnxLXfLVGR .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-ulRzvvAnxLXfLVGR .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ulRzvvAnxLXfLVGR .noteText,#mermaid-svg-ulRzvvAnxLXfLVGR .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-ulRzvvAnxLXfLVGR .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ulRzvvAnxLXfLVGR .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ulRzvvAnxLXfLVGR .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ulRzvvAnxLXfLVGR .actorPopupMenu{position:absolute;}#mermaid-svg-ulRzvvAnxLXfLVGR .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-ulRzvvAnxLXfLVGR .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ulRzvvAnxLXfLVGR .actor-man circle,#mermaid-svg-ulRzvvAnxLXfLVGR line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ulRzvvAnxLXfLVGR :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}張三李四王五你好！李四, 最近怎么樣?你最近怎么樣，王五？我很好，謝謝!我很好，謝謝!李四想了很長時間, 文字太長了不適合放在一行.打量著王五...很好... 王五, 你怎么樣?張三李四王五

代碼及圖對應如下所示：

10.Mermaid流程圖

參考文檔

#mermaid-svg-2MxIO4xNq4kqRbOD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD .error-icon{fill:#552222;}#mermaid-svg-2MxIO4xNq4kqRbOD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2MxIO4xNq4kqRbOD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-2MxIO4xNq4kqRbOD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2MxIO4xNq4kqRbOD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2MxIO4xNq4kqRbOD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2MxIO4xNq4kqRbOD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2MxIO4xNq4kqRbOD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2MxIO4xNq4kqRbOD .marker.cross{stroke:#333333;}#mermaid-svg-2MxIO4xNq4kqRbOD svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2MxIO4xNq4kqRbOD .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD .cluster-label text{fill:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD .cluster-label span{color:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD .label text,#mermaid-svg-2MxIO4xNq4kqRbOD span{fill:#333;color:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD .node rect,#mermaid-svg-2MxIO4xNq4kqRbOD .node circle,#mermaid-svg-2MxIO4xNq4kqRbOD .node ellipse,#mermaid-svg-2MxIO4xNq4kqRbOD .node polygon,#mermaid-svg-2MxIO4xNq4kqRbOD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2MxIO4xNq4kqRbOD .node .label{text-align:center;}#mermaid-svg-2MxIO4xNq4kqRbOD .node.clickable{cursor:pointer;}#mermaid-svg-2MxIO4xNq4kqRbOD .arrowheadPath{fill:#333333;}#mermaid-svg-2MxIO4xNq4kqRbOD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-2MxIO4xNq4kqRbOD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-2MxIO4xNq4kqRbOD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-2MxIO4xNq4kqRbOD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-2MxIO4xNq4kqRbOD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-2MxIO4xNq4kqRbOD .cluster text{fill:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD .cluster span{color:#333;}#mermaid-svg-2MxIO4xNq4kqRbOD 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-2MxIO4xNq4kqRbOD :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}鏈接長方形圓圓角長方形菱形

代碼及圖對應關系如下所示：

11.Flowchart流程圖

參考文檔

Created with Rapha?l 2.3.0開始我的操作確認？結束yesno

圖與代碼對應關系如下所示：

12.classDiagram類圖

參考文檔

#mermaid-svg-DeSGNKqGuHF8VPEb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DeSGNKqGuHF8VPEb .error-icon{fill:#552222;}#mermaid-svg-DeSGNKqGuHF8VPEb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-DeSGNKqGuHF8VPEb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-DeSGNKqGuHF8VPEb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-DeSGNKqGuHF8VPEb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-DeSGNKqGuHF8VPEb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-DeSGNKqGuHF8VPEb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-DeSGNKqGuHF8VPEb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-DeSGNKqGuHF8VPEb .marker.cross{stroke:#333333;}#mermaid-svg-DeSGNKqGuHF8VPEb svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-DeSGNKqGuHF8VPEb g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-DeSGNKqGuHF8VPEb g.classGroup text .title{font-weight:bolder;}#mermaid-svg-DeSGNKqGuHF8VPEb .nodeLabel,#mermaid-svg-DeSGNKqGuHF8VPEb .edgeLabel{color:#131300;}#mermaid-svg-DeSGNKqGuHF8VPEb .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-DeSGNKqGuHF8VPEb .label text{fill:#131300;}#mermaid-svg-DeSGNKqGuHF8VPEb .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-DeSGNKqGuHF8VPEb .classTitle{font-weight:bolder;}#mermaid-svg-DeSGNKqGuHF8VPEb .node rect,#mermaid-svg-DeSGNKqGuHF8VPEb .node circle,#mermaid-svg-DeSGNKqGuHF8VPEb .node ellipse,#mermaid-svg-DeSGNKqGuHF8VPEb .node polygon,#mermaid-svg-DeSGNKqGuHF8VPEb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-DeSGNKqGuHF8VPEb .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-DeSGNKqGuHF8VPEb g.clickable{cursor:pointer;}#mermaid-svg-DeSGNKqGuHF8VPEb g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-DeSGNKqGuHF8VPEb g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-DeSGNKqGuHF8VPEb .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-DeSGNKqGuHF8VPEb .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-DeSGNKqGuHF8VPEb .dashed-line{stroke-dasharray:3;}#mermaid-svg-DeSGNKqGuHF8VPEb #compositionStart,#mermaid-svg-DeSGNKqGuHF8VPEb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #compositionEnd,#mermaid-svg-DeSGNKqGuHF8VPEb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #dependencyStart,#mermaid-svg-DeSGNKqGuHF8VPEb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #dependencyStart,#mermaid-svg-DeSGNKqGuHF8VPEb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #extensionStart,#mermaid-svg-DeSGNKqGuHF8VPEb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #extensionEnd,#mermaid-svg-DeSGNKqGuHF8VPEb .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #aggregationStart,#mermaid-svg-DeSGNKqGuHF8VPEb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb #aggregationEnd,#mermaid-svg-DeSGNKqGuHF8VPEb .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-DeSGNKqGuHF8VPEb .edgeTerminals{font-size:11px;}#mermaid-svg-DeSGNKqGuHF8VPEb :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}CoolWhere am i??interface?Class01int chimpint gorillasize()AveryLongClassClass09C2C3Class07Object[] elementDataequals()Class10>>service>>int idsize()

圖與代碼對應關系如下所示：

總結

有一說一，第一次寫這么多效率有點低后面有點累也就有點擺，不過總的來說還算充實，加油，be better!

走過路過隨手點個【贊】唄，覺得內容還不錯就順便【關注】一下，見證我國青少年的成長！如果能不吝指教給點意見或評價什么的，我將不勝感激。

總結

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

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