学习过程中整理的MarkDown笔记,集前人之精华化繁为简,以未接触过MarkDown笔记的小白为主要对象,详细罗列了MarkDown基础知识并捎带涉及进阶内容,力求知识结构清晰,避免冗余。学习不精,欢迎批评指正。
<a href="#Markdown__1">一、Markdown 简介</a> <a href="#Markdown__7">二、Markdown 工具</a> <a href="#Markdown__21">三、Markdown 基础语法</a>
<a href="#1_23">1、标题</a> <a href="#2_39">2、文本</a> <a href="#3_56">3、列表</a> <a href="#4_80">4、链接/图片</a> <a href="#5_95">5、引用</a> <a href="#6_109">6、水平线</a>
<a href="#1_110">(1)分隔线</a> <a href="#2_126">(2)删除线</a> <a href="#3_132">(3)下划线</a> <a href="#7_139">7、表格</a> <a href="#8_156">8、注脚</a> <a href="#9_175">9、代码</a> <a href="#_192">五、高级语法</a>
<a href="#1_194">1、目录</a> <a href="#2HTML_198">2、HTML</a> <a href="#3_202">3、流程图和时序图</a> <a href="#4_234">4、复选框</a> <a href="#5Markdown__246">5、Markdown 数学公式</a> <a href="#_248">六、快捷键</a>
Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。 通过简单的标记语法,它可以使普通文本内容具有一定的格式,可以导出 PPT、HTML、Word、PDF、JPG 等多种格式的文档,文档后缀为 .md 或 .markdown。
由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、CSDN、简书等,甚至还能被使用来撰写电子书。
Markdown 常用编写工具有 Typora (收费) 和 VSCode (免费) 等,由于一些众所众知的原因,本篇以 VSCode 为例
VSCode 相关插件:
Markdown All in One:载入 markdown 插件
Markdown Preview Enhanced:markdown 效果预览
Code Spell Checker:自动检测英文拼写
Paste Image:插入图片
mermaid:绘图工具
一级标题 ==> 一个 # 号 二级标题 ==> 两个 # 号 N 级标题 ==> N 个 # 号
六级标题:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
斜体文本:编辑文本前后,输入【一个】星号 * 或下划线 _ 粗体文本:编辑文本前后,输入【两个】星号 ** 或下划线 __ 粗斜体文本:编辑文本前后,输入【三个】星号 *** 或下划线 ___
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
无序列表:使用星号 * 、加号 + 或减号 - ,效果一致 有序列表:使用数字 1、2、3 等,并加上英文句号 .
* 无序列表 1
+ 无序列表 2
- 无序列表 3
1. 有序列表 1
2. 有序列表 2
3. 有序列表 3
控制层级:符号星号 * 、加号 + 或减号 - 前使用 tab
* 无序列表 1
+ 无序列表 2
- 无序列表 2.1
* 无序列表 2.2
原始链接:<链接地址> 文字链接:[链接名称] (链接地址) 图片链接:![链接名称](链接地址 “title”)]
原始链接:<https://www.baidu.com>
文字链接:[百度搜索](https://www.baidu.com)
图片链接:![markdown](https://img-blog.csdnimg.cn/img_convert/951d32397648381b7e20e24dac7db3f0.png "markdown")
原始链接:<a href="https://www.baidu.com">https://www.baidu.com</a> 文字链接:<a href="https://www.baidu.com">百度搜索</a> 图片链接:
一层引用:一个右尖括号 > 二层引用:两个右尖括号 > N 层引用:N 个右尖括号 >
> 一层引用
>> 二层引用
>>> 三层引用
一层引用
二层引用
三层引用
【三个以上】星 * 或减号 -
---
***
* * ****
- - - ----
<hr> <hr> <hr> <hr>
删除文字前后添加【两个】~
~~不幸被删除~~
<s>不幸被删除</s>
下划线文字前后添加< u >< u />
<u>愉快的下划线</u>
<u>愉快的下划线</u>
分隔列:使用竖线 | 分隔行:使用减号 - 对齐位置:冒号 : 位置决定对齐位置
左对齐::- 右对齐:-: 居中对齐::-:
左对齐 | 居中对齐 | 右对齐
:- | :-: | -:
1 | 2 | 3
小左 | 居中 | 小右
<table> <thead> <tr> <th align="left">左对齐</th> <th align="center">居中对齐</th> <th align="right">右对齐</th> </tr> </thead> <tbody> <tr> <td align="left">1</td> <td align="center">2</td> <td align="right">3</td> </tr> <tr> <td align="left">小左</td> <td align="center">居中</td> <td align="right">小右</td> </tr> </tbody> </table>nn### 8、注脚
脚注:文本右上角备注 尾注:文末备注内容
脚注:文本[^注脚名字] 尾注:[^数字]:文本解释
百度搜索[^1]
[^1]: 我国著名的竞价广告商
百度[^2]
[^2]:https://www.baidu.com/
百度搜索<sup class="footnote-ref"><a href="#fn1" id="fnref1">1</a></sup>
百度<sup class="footnote-ref"><a href="#fn2" id="fnref2">2</a></sup>
行内代码:内容前后【一个】反引号 `
JS函数 `Promise()`
JS 函数 Promise()
块内代码:内容前后【三个】反引号 ```
首行反引号后紧跟代码块语言,如```javascript
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)];
插入目录:输入 [TOC] (Table of Content) 即原地列出全部标题
支持原生 HTML 语法,内联样式书写
<a href="https://mermaid-js.github.io/mermaid/#/README">Mermaid</a> 是一种基于 JS 的绘图工具,使用mermaid作为代码块的语言标识 流程图
<svg id="mermaid-svg-w0H8YYZH6ZHuTxr7" width="100%" xmlns="http://www.w3.org/2000/svg" height="254" style="max-width: 221px;" viewbox="0 0 221 254"> <style>#mermaid-svg-w0H8YYZH6ZHuTxr7 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .error-icon{fill:#552222;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .marker.cross{stroke:#333333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .cluster-label text{fill:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .cluster-label span{color:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .label text,#mermaid-svg-w0H8YYZH6ZHuTxr7 span{fill:#333;color:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .node rect,#mermaid-svg-w0H8YYZH6ZHuTxr7 .node circle,#mermaid-svg-w0H8YYZH6ZHuTxr7 .node ellipse,#mermaid-svg-w0H8YYZH6ZHuTxr7 .node polygon,#mermaid-svg-w0H8YYZH6ZHuTxr7 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .node .label{text-align:center;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .node.clickable{cursor:pointer;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .arrowheadPath{fill:#333333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .cluster text{fill:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 .cluster span{color:#333;}#mermaid-svg-w0H8YYZH6ZHuTxr7 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-w0H8YYZH6ZHuTxr7 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
</path> <defs> <marker id="arrowhead48" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path> </marker> </defs> </g> <g class="edgePath LS-A LE-C" style="opacity: 1;" id="L-A-C">
</path> <defs> <marker id="arrowhead49" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path> </marker> </defs> </g> <g class="edgePath LS-B LE-D" style="opacity: 1;" id="L-B-D">
</path> <defs> <marker id="arrowhead50" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path> </marker> </defs> </g> <g class="edgePath LS-B LE-E" style="opacity: 1;" id="L-B-E">
</path> <defs> <marker id="arrowhead51" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path>
</marker>
</defs>
</g>
</g>
<g class="edgeLabels">
<g class="edgeLabel" transform="" style="opacity: 1;">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
</g>
<g class="nodes">
<g class="node default" id="flowchart-A-40" transform="translate(136,31)" style="opacity: 1;">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爷爷
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-B-41" transform="translate(85,127)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爸爸
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-C-43" transform="translate(187,127)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
叔叔
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-D-45" transform="translate(34,223)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
大郎
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-E-47" transform="translate(136,223)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
二郎
</foreignobject>
</g>
</g>
</g>
</g>
</g> </g> </svg>
graph TD;
A(爷爷)-->B(爸爸);
A-->C(叔叔);
B-->D(大郎);
B-->E(二郎);
时序图
<svg id="mermaid-svg-IJ8j7s0OajuakxPk" width="100%" xmlns="http://www.w3.org/2000/svg" height="206" style="max-width: 272px;" viewbox="0 0 272 206"> <style>#mermaid-svg-IJ8j7s0OajuakxPk {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IJ8j7s0OajuakxPk .error-icon{fill:#552222;}#mermaid-svg-IJ8j7s0OajuakxPk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-IJ8j7s0OajuakxPk .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-IJ8j7s0OajuakxPk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-IJ8j7s0OajuakxPk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-IJ8j7s0OajuakxPk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-IJ8j7s0OajuakxPk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-IJ8j7s0OajuakxPk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-IJ8j7s0OajuakxPk .marker.cross{stroke:#333333;}#mermaid-svg-IJ8j7s0OajuakxPk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-IJ8j7s0OajuakxPk .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-IJ8j7s0OajuakxPk .cluster-label text{fill:#333;}#mermaid-svg-IJ8j7s0OajuakxPk .cluster-label span{color:#333;}#mermaid-svg-IJ8j7s0OajuakxPk .label text,#mermaid-svg-IJ8j7s0OajuakxPk span{fill:#333;color:#333;}#mermaid-svg-IJ8j7s0OajuakxPk .node rect,#mermaid-svg-IJ8j7s0OajuakxPk .node circle,#mermaid-svg-IJ8j7s0OajuakxPk .node ellipse,#mermaid-svg-IJ8j7s0OajuakxPk .node polygon,#mermaid-svg-IJ8j7s0OajuakxPk .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-IJ8j7s0OajuakxPk .node .label{text-align:center;}#mermaid-svg-IJ8j7s0OajuakxPk .node.clickable{cursor:pointer;}#mermaid-svg-IJ8j7s0OajuakxPk .arrowheadPath{fill:#333333;}#mermaid-svg-IJ8j7s0OajuakxPk .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-IJ8j7s0OajuakxPk .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-IJ8j7s0OajuakxPk .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-IJ8j7s0OajuakxPk .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-IJ8j7s0OajuakxPk .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-IJ8j7s0OajuakxPk .cluster text{fill:#333;}#mermaid-svg-IJ8j7s0OajuakxPk .cluster span{color:#333;}#mermaid-svg-IJ8j7s0OajuakxPk 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-IJ8j7s0OajuakxPk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
</path> <defs> <marker id="arrowhead65" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path> </marker> </defs> </g> <g class="edgePath LS-A LE-C" style="opacity: 1;" id="L-A-C">
</path> <defs> <marker id="arrowhead66" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path> </marker> </defs> </g> <g class="edgePath LS-B LE-D" style="opacity: 1;" id="L-B-D">
</path> <defs> <marker id="arrowhead67" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path> </marker> </defs> </g> <g class="edgePath LS-B LE-E" style="opacity: 1;" id="L-B-E">
</path> <defs> <marker id="arrowhead68" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">
</path>
</marker>
</defs>
</g>
</g>
<g class="edgeLabels">
<g class="edgeLabel" transform="" style="opacity: 1;">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
<g class="edgeLabel" style="opacity: 1;" transform="">
<g transform="translate(0,0)" class="label">
<rect rx="0" ry="0" width="0" height="0"></rect>
<foreignobject width="0" height="0">
</foreignobject>
</g>
</g>
</g>
<g class="nodes">
<g class="node default" id="flowchart-A-56" transform="translate(34,127)" style="opacity: 1;">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爷爷
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-B-57" transform="translate(136,79)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
爸爸
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-C-59" transform="translate(136,175)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
叔叔
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-D-61" transform="translate(238,31)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
大郎
</foreignobject>
</g>
</g>
</g>
<g class="node default" style="opacity: 1;" id="flowchart-E-63" transform="translate(238,127)">
<rect rx="5" ry="5" x="-26" y="-23" width="52" height="46" class="label-container"></rect>
<g class="label" transform="translate(0,0)">
<g transform="translate(-16,-13)">
<foreignobject width="32" height="26">
二郎
</foreignobject>
</g>
</g>
</g>
</g>
</g> </g> </svg>
graph LR;
A(爷爷)-->B(爸爸);
A-->C(叔叔);
B-->D(大郎);
B-->E(二郎);
todo-list : - [x/X]和 - [ ]
- [x] 选中状态
- [ ] 未选中状态
<input type="checkbox" class="task-list-item-checkbox" checked="true" disabled> 选中状态 <input type="checkbox" class="task-list-item-checkbox" disabled> 未选中状态
加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl + H 有序列表 Ctrl + O 无序列表 Ctrl + U 横线 Ctrl + R 撤销 Ctrl + Z 重做 Ctrl + Y
<hr class="footnotes-sep"> <section class="footnotes">
我国著名的竞价广告商 <a href="#fnref1" class="footnote-backref">↩︎</a>
https://www.baidu.com/ <a href="#fnref2" class="footnote-backref">↩︎</a>
</section>
本站主要用于日常笔记的记录和生活日志。本站不保证所有内容信息可靠!(大多数文章属于搬运!)如有版权问题,请联系我立即删除:“abcdsjx@126.com”。
QQ: 1164453243
邮箱: abcdsjx@126.com