Markdown 基础操作 | 高级操作 大全+Typora常用快捷键

Markdown 基础操作 | 高级操作 大全

1. Markdown基础操作

HTML(HyperText Markup Language) 和 Markdown 都是 标记语言，前者用标签，后者用符号；

而且 Markdown 对 html 大部分都支持的，同样的效果和样式往往 用两种语言都可以实现。🤷🏻‍♂️🤷🏻‍♂️🤷🏻‍♂️

	HTML	Markdown	Typora	效果
标题	<h1>一级标题></h1> <h2>二级标题</h2> <h3>三级标题</h3> ……	#一级标题 ##二级标题 ###三级标题 ……	Crtl+1 Crtl+2 Crtl+3 ……	看我文章标题就是
字体	加粗：<strong>加粗</strong> 斜体：<em>斜体</em> 下划线：<u>下划线</u> 删除线：<del>删除线</del>	加粗：**加粗** 斜体：*斜体* 下划线：同 html 删除线：同 html	加粗：Crtl+b 斜体：Crtl+i 下划线：Crtl+u	加粗 斜体 下划线 删除线
链接	<a href="链接">链接描述</a>	[链接描述](链接 "鼠标停留显示文字")	Crtl+k	(Yikou Li) (github.com)
图片	<img src="图片链接（本地路径/网络地址）" alt="描述文字" >	 注意图片链接不加双引号。	Crtl+shift+i
列表	有序列表： 无序列表：	有序列表： 无序列表：	有序列表：Crtl+Shift+[ 无序列表：Crtl+Shift+} 也可直接输入：1或*+.+空格	看我文章内容用的就是有序和无序列表
表格	<table></table> <tr></tr> <th></th> <td></td>		Crtl+t	效果看此表格就成
代码块	<code></code>	单行代码块：`你的代码` 多行代码： ``` 你的代码 ```	Crtl+Shift+k	代码块文章里多的是

2. Markdown高级操作

1. 键盘按钮样式

使用 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd> 打开任务管理器

使用 Ctrl+Shift+Esc 打开任务管理器

2. 下拉展开

<details>
    <summary>点击查看细节</summary>
    细节
</details>

这个在 csdn 上显示不出来， Typora上可以。

3. 脚注

Jiaojiao[^1]

Jiaojiao¹

4. 文章内部跳转

注意 Typora ² 点击跳转需要 Crtl + 鼠标左键

一共需要两步：

1. 埋锚点

    <span id="custom-id">我是跳转目标</span>
   

   我是跳转目标

   我用的 Typora9.x 埋锚点只能用 HTML 标签的 name 属性，id属性不行。（标准 Markdown 语法是用 id 属性）

2. 设置链接指向锚点

   Typora 里 跳转 操作，用 Markdown语法 和 HTML语法 都可以。

   • markdown

     [点击跳转](#custom-id)
     

     点击跳转

   • html

     <a href="#custom-id">点击跳转</a>
     

     点击跳转

     点击跳转到文章顶部

5. 隐藏文字

用html标签，设置字体颜色为白色（你的文章背景什么颜色就用什么色😏）

<font color="white">作者是个大帅皮</font>

作者是个大帅皮⬅这里有字嗷~

6. 给链接增加 Title（鼠标停留就会有提示）

[Yikou 的个人博客](https://blog.csdn.net/qq_45770232 "Yikou 的个人博客")

Yikou 的个人博客

7. 表情包

1. 快捷键 Win + .

   在打开的窗口点击选择你想添加emoji，按Esc退出。

2. 表情符号短代码 （由::符号包裹）

   :joy:

   😂

8. LaTex 数学公式

LaTex语法标志性符号：$$ 和 $$ $$

常用语法：

• 普通公式

  $f(x)=2x+1$

  $fx=2x+1$

• 一段公式单独成行

  $$
  	f(x) = 2x + 1
  $$
  

  $$f(x)=2x+1$$

  Typora可以输入$$然后用shift+enter自动识别并匹配语法。

• 上下标

  • $x^2$、$x_2$

    $x^2$、$x_2$

  • $x^{1/2}$、$x_{i-1}$

    $x^{1/2}$、$x_{i-1}$

• 函数

  $f(x)=sin(x)$、$log_2(x2)$

  $f(x)=sin(x)$、$lo{g}_2(x2)$

• 符号

  • 希腊符号

    $\pi$、$\lambda$、$\alpha$、$\beta$、$\theta$、$\eta$、$\gamma$、$\delta$

    $\pi$、$\lambda$、$\alpha$、$\beta$、$\theta$、$\eta$、$\gamma$、$\delta$、$\le$

  • 数学符号

    $\in$、$\ni$ 或 $\owns$、$\notin$、$=$、$\ne$ 或 $\neq$、、$\leq$ or $\le$、$\geq$ or $\ge$、$\pm$、$\div$、$\cdot$、$\sum$、$res = \sum_{n=1}^N a_n$、$res = \sum\limits_{n=1}^N a_n$、$\frac{a}{b} $

    $\in$、$\ni$、$\notin$、$=$、$\ne$、$\le$、$\ge$、$\pm$、$÷$、$\cdot$、$\sum$、$res={\sum }_{n=1}^N{a}_n$、$res=\sum _{n=1}^N{a}_n$、$\frac{a}{b}$

  • 大括号

    $$ 
    f(x) = 
    \left\{
    	\begin{aligned}
    	x & = & \cos(t) \\
    	y & = & \sin(t) \\
    	z & = & \frac xy
    	\end{aligned}
    \right.
    $$
    

    $$f(x)=\{\begin{array}{rlr}x& =& \cos (t)\\ y& =& \sin (t)\\ z& =& \frac{x}{y}\end{array}$$

9. 流程图、时序图、甘特图

• 横向流程图

  ```mermaid
  graph LR
  A[方形] -->B(圆角)
      B --> C{条件a}
      C -->|a=1| D[结果1]
      C -->|a=2| E[结果2]
      F[横向流程图]
  ```
  

• 竖向流程图

  ```mermaid
  graph TD
  A[方形] --> B(圆角)
      B --> C{条件a}
      C --> |a=1| D[结果1]
      C --> |a=2| E[结果2]
      F[竖向流程图]
  ```
  

• 标准流程图

  ```mermaid
  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
  ```
  

• 标准流程图（横向）

  ```mermaid
  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
  ```
  

• UML时序图

  ```mermaid
  sequenceDiagram
  对象A->>对象B: 对象B你好吗?（请求）
  Note right of 对象B: 对象B的描述
  Note left of 对象A: 对象A的描述(提示)
  对象B-->>对象A: 我很好(响应)
  对象A->>对象B: 你真的好吗？
  ```
  

• UML时序图复杂样例

  ```mermaid
  sequenceDiagram
  Title: 标题：复杂使用
  对象A->>对象B: 对象B你好吗?（请求）
  Note right of 对象B: 对象B的描述
  Note left of 对象A: 对象A的描述(提示)
  对象B-->>对象A: 我很好(响应)
  对象B->>小三: 你好吗
  小三-->>对象A: 对象B找我了
  对象A->>对象B: 你真的好吗？
  Note over 小三,对象B: 我们是朋友
  participant C
  Note right of C: 没人陪我玩
  ```
  

• UML标准时序图

  ```mermaid
  %% 时序图例子,-> 直线，-->虚线，->>实线箭头
    sequenceDiagram
      participant 张三
      participant 李四
      张三->王五: 王五你好吗？
      loop 健康检查
          王五->王五: 与疾病战斗
      end
      Note right of 王五: 合理 食物 <br/>看医生...
      李四-->>张三: 很好!
      王五->李四: 你怎么样?
      李四-->王五: 很好!
  ```
  

• 甘特图

  ```mermaid
          gantt
          dateFormat  YYYY-MM-DD
          title 软件开发甘特图
          section 设计
          需求                      :done,    des1, 2014-01-06,2014-01-08
          原型                      :active,  des2, 2014-01-09, 3d
          UI设计                     :         des3, after des2, 5d
      未来任务                     :         des4, after des3, 5d
          section 开发
          学习准备理解需求                      :crit, done, 2014-01-06,24h
          设计框架                             :crit, done, after des2, 2d
          开发                                 :crit, active, 3d
          未来任务                              :crit, 5d
          耍                                   :2d
          section 测试
          功能测试                              :active, a1, after des3, 3d
          压力测试                               :after a1  , 20h
          测试报告                               : 48h
  ```
  

References：

Markdown语法基础 - 四冥 - 博客园 (cnblogs.com)

Markdown 高级技巧 | 菜鸟教程 (runoob.com)

Markdown 基本语法 | Markdown 官方教程

Markdown 扩展语法入门 | Markdown 官方教程

---

1. Jiaojiao 是我媳妇😜。 ↩︎

2. 一款 Markdown 编辑器和阅读器。 ↩︎