展语法

Typora扩展了诸如数学公式、目录、脚注、上/下标、图标操作等功能，并且支持常见的额HTML标签。

启用扩展语法，需要在“偏好设置”中开启所需要的扩展语法：

样式

• 数学公式语法：使用$把数学公式包裹起来，例如：

$ (2+5)*3/7=3 $
$ f(x,y)=\sqrt[n]{{x^n}{y^n}} $

显示效果：

数学公式的快捷键为Control + M。

注：数学公式扩展采用LaTeX语法标记，推荐阅读：

LaTeX完整教程：http://www.mohu.org/info/lshort-cn.pdf

常用LaTeX语法查询：https://www.mohu.org/info/symbols/symbols.htm

• 上/下标

语法：上标，使用^包裹需要上标的内容；下标，使用~包裹需要上标的内容，例如：

示例1^[注1]^
示例2~[注2]~

显示效果：

上下标操作没有对应的快捷键。

• 高亮

语法：使用==包裹需要高亮的内容，例如：

==这句话高亮==

显示效果：

高亮的快捷键为：Shift + Command + H

• 注释

语法：与代码注释相同，使用<!-- -->包裹注释内容，例如：

<!--这是注释-->

显示效果：

选中文本，转化为注释的快捷键：Control + -。

注：导出格式为pdf和docx（word）时，注释会被隐藏，不进行显示。

• 清除样式

快速清除一段内容的格式和样式，可以选中内容，然后使用快捷键：Command + \。

段落

• 目录

Typora会自动根据标题级别，获取标题作为目录。并且会随标题修改自动更新。

语法：在需要插入目录的位置，输入：[TOC]，然后按回车，例如：

注：需要为单独一行，且必须敲回车才会生效。

• 脚注链接

语法：用[^]包裹脚注，然后在文档任意位置（一般是尾部）添加对应的脚注内容，例如：

这段内容参考[^语法1]。
[^语法1]：http://www.mohu.org/info/lshort-cn.pdf

显示效果：

快速插入脚注链接的快捷键为：Option + Command + R

• 序列图

序列图是Typora自己的扩展语法，仅适用于导出为pdf、HTML、docx等格式，如果需要更好的兼容性，推荐在Typora内绘制后截图再插入。

语法：

```sequence
Title: TCP三次握手
客户端	-> 服务器: SYN
note right of 服务器: T1服务器建联延迟
服务器 --> 客户端: SYN ACK
note right of 服务器: T2客户端建联延迟
客户端 -> 服务器: ACK
```

显示效果：

注：语法中的标点符号需要使用英文；

Typora使用的序列图语法为：js-sequence-diagrams，语法说明：https://bramp.github.io/js-sequence-diagrams/

• 流程图

Typora的流程图基于flowchart.js语法，与序列图相同，仅适用于导出文件。

语法：

```flow
st=>start: 开机
op=>operation: P.O.S.T
cond=>condition: 正常
e=>end: 启动OS
st->op->cond
cond(yes)->e
cond(no)->op
```

显示效果：

注：注意英文标点和空格，多余的空格会引起语法报错；

flowchart.js 语法说明：https://flowchart.js.org/，或：https://github.com/adrai/flowchart.js/

• Mermaid

Mermaid是非常强大的图表插件，支持序列图、流程图和甘特图。使用说明：https://mermaidjs.github.io/。对于大量使用图表的同学们，建议专门学习下mermaid的使用。

其在Typora中的使用与前两个相同：

```mermaind
mermanid语句
```

由于mermaid内容较多，以后会做专题内容演示，这里不再讲解。

HTML标签

Typora 支持大量的HTML标签，但是由于可读性太差，且页面和视频导出时无法显示，对于日常的写作用处并不大，所以这里只简单介绍几个常用的类型。

• 文字颜色/大小

示例：

<span style="color:red;font-size:16px">红色</span>

显示效果

• 嵌入网页

<iframe height='200' scrolling='yes' title='' src='https://www.toutiao.com/c/user/97378548153/' frameboard='no' style='width:80%;'></iframe>

显示效果：

• 插入视频

语法：

<video src='./视频/使用Typora排版（一）.mp4'/>

显示效果：

注：需要使用HTML在Typora中排版的同学，可参考：https://support.typora.io/HTML/

Typora的扩展语法种类多，使用也复杂，只需要根据自己的需要选择学习即可，下节我们一起学习Typora的一些使用技巧。

述

在我们日常的书写代码中,经常使用到float:left/right和position:absoulte/fixed,我们都知道这几个CSS样式都能使HTML中的元素脱离文档流(normal-flow),但是他们脱离文档流之后的效果是否相同呢?

文档流与文本流

文本流

文本流,简单来说就是元素内部的一系列的字符的排列规则。

文档流

文档流,英文是normal flow,又翻译为常规流,标准流,正常流,普通流等。

文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动地从左到右(非块级元素),从上到下(块级元素)的排列规则。

元素在排版中的定位类型分为三种:

(1)文档流:块级格式化的块级盒子, 行内格式化的行内盒子以及相对定位的块级盒子和行内盒子

(2)浮动(float)