markdown语法手册附快捷键（10min掌握）

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:11127

语法 markdown md
{}
目录一、标题 ctrl/⌘+序号（0.5min）1.基础语法2.带目录的标题二、文本编辑（2min）1.斜体 Ctrl /⌘+I 2.粗体 Ctrl /⌘+B 3.标记 4.引用 Ctrl/⌘+Shift+Q5.删除 Alt+Shift+56.上标7.下标三、列表（2min）1....

目录

<a href="#%E4%B8%80%E3%80%81%E6%A0%87%E9%A2%98%E8%AF%AD%E6%B3%95">一、标题 ctrl/⌘+序号（0.5min）</a>

<a href="#1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95">1.基础语法</a>

<a href="#2.%E5%B8%A6%E7%9B%AE%E5%BD%95%E7%9A%84%E6%A0%87%E9%A2%98">2.带目录的标题</a>

<a href="#%E4%BA%8C%E3%80%81%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E8%AF%AD%E6%B3%95">二、文本编辑（2min）</a>

<a href="#1.%E6%96%9C%E4%BD%93">1.斜体 Ctrl /⌘+I</a>

<a href="#%C2%A02.%E7%B2%97%E4%BD%93"> 2.粗体 Ctrl /⌘+B</a>

<a href="#%C2%A03.%E6%A0%87%E8%AE%B0"> 3.标记</a>

<a href="#%C2%A04.%E5%BC%95%E7%94%A8"> 4.引用 Ctrl/⌘+Shift+Q</a>

<a href="#5.%E5%88%A0%E9%99%A4">5.删除 Alt+Shift+5</a>

<a href="#6.%E4%B8%8A%E6%A0%87">6.上标</a>

<a href="#7.%E4%B8%8B%E6%A0%87">7.下标</a>

<a href="#%E4%B8%89%E3%80%81%E5%88%97%E8%A1%A8%E8%AF%AD%E6%B3%95%C2%A0">三、列表（2min）</a>

<a href="#1.%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8">1.有序列表 Ctrl/⌘+Shift+[</a>

<a href="#2.%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8">2.无序列表 Ctrl/⌘+Shift+]</a>

<a href="#3.%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C%E5%BF%AB%E6%8D%B7%E9%94%AE">3.相关操作快捷键</a>

<a href="#3.%E4%BB%BB%E5%8A%A1%E5%88%97%E8%A1%A8">4.任务列表</a>

<a href="#%E5%9B%9B%E3%80%81%E5%9B%BE%E7%89%87%E5%BC%95%E7%94%A8%C2%A0">四、图片引用 （3min）</a>

<a href="#1.%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95">1.基础语法</a>

<a href="#2.%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87%E5%B0%BA%E5%AF%B8">2.引用图片尺寸</a>

<a href="#3.%E5%9B%BE%E7%89%87%E5%B1%85%E4%B8%AD%E5%BC%95%E7%94%A8">3.图片居中引用</a>

<a href="#%C2%A04.%E5%9B%BE%E7%89%87%E5%8F%B3%E5%AF%B9%E9%BD%90%E5%BC%95%E7%94%A8"> 4.图片右对齐引用</a>

<a href="#%C2%A0%E4%BA%94%E3%80%81%E9%93%BE%E6%8E%A5%E5%BC%95%E7%94%A8"> 五、链接引用 Ctrl/⌘+K（0.5min）</a>

<a href="#%E2%80%8B%E7%BC%96%E8%BE%91">​编辑</a>

<a href="#%C2%A0%E5%85%AD%E3%80%81%E4%BB%A3%E7%A0%81%E6%AE%B5"> 六、代码块 Ctrl/⌘+Shift+K（0.5min）</a>

<a href="#%C2%A0%E4%B8%83%E3%80%81%E6%B3%A8%E9%87%8A%E4%B8%8E%E6%B3%A8%E8%84%9A"> 七、注释与注脚（0.5min）</a>

<a href="#1.%E6%B3%A8%E9%87%8A">1.注释</a>

<a href="#%C2%A02.%E6%B3%A8%E8%84%9A"> 2.注脚</a>

<a href="#%C2%A0%E5%85%AB%E3%80%81%E8%A1%A8%E6%A0%BC"> 八、表格（1min）</a>

<a href="#1.%E5%9F%BA%E7%A1%80%E8%A1%A8%E6%A0%BC">1.基础表格</a>

<a href="#2.%E8%AE%BE%E7%BD%AE%E5%B7%A6%E5%8F%B3%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E8%A1%A8%E6%A0%BC">2.设置左右居中对齐表格</a>

<a href="#%E4%B9%9D%E3%80%81Latex%E5%85%AC%E5%BC%8F">九、Latex公式</a>

<a href="#%E5%8D%81%E3%80%81%E5%90%84%E7%A7%8D%E5%9B%BE%E6%80%BB%E7%BB%93">十、各种图总结</a>

<hr id="hr-toc">

一、标题 ctrl/⌘+序号（0.5min）

1.基础语法

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果展示

2.带目录的标题

可以在标题前加“@TOC”生成标题目录

效果展示

二、文本编辑（2min）

1.斜体 Ctrl /⌘+I

*斜体*  或者  _斜体_

2.粗体 Ctrl /⌘+B

**加粗** 或者 __加粗__

3.标记

==标记==

4.引用 Ctrl/⌘+Shift+Q

> 引用

5.删除 <s>Alt+Shift+5</s>

~~删除~~

6.上标

10^-5^

7.下标

A~xy~

效果展示

三、列表（2min）

1.有序列表 Ctrl/⌘+Shift+[

1. 有序列表项1
2. 有序列表项2
3. 有序列表项3

注意：这里是“序号.”+“空格”+“内容”

2.无序列表 Ctrl/⌘+Shift+]

- 无序列表项
  * 无序列表项
   + 无序列表项

注意：这里- * + 没有特殊要求，在生成无序列表中是等价的，看个人喜好即可。

3.相关操作快捷键

增加缩进：Ctrl/⌘+]

减少缩进：Ctrl/⌘+[

4.任务列表

- [ ] 计划任务
- [x] 完成任务

效果展示

四、图片引用 （3min）

1.基础语法

![图片名称](图片相对/绝对/网络引用地址)

2.引用图片尺寸

![图片名称](图片相对/绝对/网络引用地址 =图片高度x图片宽度)

也可以只限制一项，而另一项省略。

3.图片居中引用

![图片名称](图片相对/绝对/网络引用地址#pic_center)

4.图片右对齐引用

![图片名称](图片相对/绝对/网络引用地址#pic_right)

同样也可以调整尺寸，方法同上

五、链接引用 Ctrl/⌘+K（0.5min）

[MyBlog](https://timerring.blog.csdn.net/)

效果展示

六、代码块 Ctrl/⌘+Shift+K（0.5min）

```javascript
// 上面也可以换为其他语言名称，生成对应语言的code高亮
var foo = 'bar';

 
 
效果展示
![](https://img-blog.csdnimg.cn/063eaea118cd4956b0058674739cbadf.png)
 
 
#  七、注释与注脚（0.5min）
 
 
## 1.注释

欢迎关注timerring的 博客。

*[博客]: https://timerring.blog.csdn.net/

 
 
注意需要注释的词要与前面文本之间用“空格”隔开。
 
 
效果展示
![](https://img-blog.csdnimg.cn/c2c83a4046744ff4ad185e34890f1bbf.png)
 
 
##  2.注脚

这里是注脚1。^1

 
 
效果展示
![](https://img-blog.csdnimg.cn/a844e25edfc9474c93ee7f356e889215.png)
 
 
#  八、表格（1min）
 
 
## 1.基础表格
列表头 下面是表头分割线
项目1 项目1
项目2 项目2
项目3 项目3 
 
 
注意：这里的“-”长度任意，但是一列的分割线不能少于2个“-”
 
 
## 2.设置左右居中对齐表格
下面是表头分割线 其中“：” 代表向哪对齐
“:---:”表示居中对齐 “---:”表示右侧对齐 
 
 
效果展示
![](https://img-blog.csdnimg.cn/a337c144e716454fb5b8c007e7b1fd42.png)
 
 
# 九、Latex公式
 
 
具体参考：<a href="https://katex.org/" title="KaTeX – The fastest math typesetting library for the web">KaTeX – The fastest math typesetting library for the web</a> 
 
 
# 十、各种图总结
 
 
鉴于md绘制各种图不是非常常用，这里放置参考链接，可以进行系统学习。
 
 
1.UML图

<a class="has-card" href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.https://mermaid-js.github.io/mermaid/#/sequenceDiagram</a>

 
 
2.甘特图
 
 
<a class="has-card" href="https://mermaid-js.github.io/mermaid/#/gantt" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,     gantt charts and git graphs.">mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
![](https://csdnimg.cn/release/blog_editor_html/release2.1.7/ckeditor/plugins/CsdnLink/icons/icon-default.png)https://mermaid-js.github.io/mermaid/#/gantt</a>
 
 
3.Mermaid流程图
 
 
<a class="has-card" href="https://mermaid-js.github.io/mermaid/#/flowchart?id=graph" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,     gantt charts and git graphs.">mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
![](https://csdnimg.cn/release/blog_editor_html/release2.1.7/ckeditor/plugins/CsdnLink/icons/icon-default.png)https://mermaid-js.github.io/mermaid/#/flowchart?id=graph</a>
 
 
4.Flowchart流程图

<a class="has-card" href="http://flowchart.js.org/" title="flowchart.js">flowchart.jshttp://flowchart.js.org/</a>

 
 
5.classDiagram类图

<a class="has-card" href="https://mermaid-js.github.io/mermaid/#/classDiagram" title="mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.https://mermaid-js.github.io/mermaid/#/classDiagram</a>

```

至此已经基本学完所有markdown语法了，恭喜！

原文地址：https://blog.csdn.net/m0_52316372/article/details/125724052?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168906542916800213021592%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168906542916800213021592&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-11-125724052-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:https://www.sjxi.cn/detil/18701dc90c14474bbf503d64d316f763

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复