段落排版
Typora提供了全面且便捷的段落格式化功能,涵盖了标题、表格、代码块、公式块、引用、列表、分割线、目录等常用元素。我们可以通过菜单栏的"段落"选项浏览和使用这些功能,但更高效的方式是直接采用Markdown语法或快捷键,如表所示。


1、表格
直接使用Markdown的表格语法确实有些复杂,管理和维护也不方便,Typora在表格的处理上堪称业界典范。
例如,在创建表格时,无须记忆复杂语法,只需使用快捷键Option+Command+T(macOS系统)或Ctrl+T(Windows/Linux系统)即可快速插入表格,如图所示。

若需调整表格的行数、列数及对齐方式,那么可将光标置于表格内,此时表格左上方将显示操作菜单,直接调整即可,如图所示。

2、代码块
在Typora中插入代码块的常用方法是使用围栏代码块。输入三个反引号```后,紧接着输入编程语言的名称,Typora会触发自动联想功能,帮助我们快速选择所需的语言,代码块如图所示。

若要配置代码块的显示方式,例如是否显示行号、启用自动换行、设置代码缩进,以及指定默认的代码块语言,那么请进入Typora的设置界面,单击"Markdown"选项卡,在"代码块"选项组中进行详细设置,如图所示。

值得注意的是,Typora的代码块支持diff语法,这对于标记代码或文本的更改(新增和删除)非常有用,方便进行版本比较和协同开发,diff语法如图所示。

3、公式块
Typora内置了对数学公式的强大支持,它能够通过解析Tex和LaTeX语法,将复杂的数学表达式清晰地渲染出来。只需要将数学公式用双美元符号$$包裹起来即可创建公式块。
语法如下。

公式块的效果如图所示。

4、警告框
Typora支持GFM警告框语法,用于突出显示重要信息。通过单击菜单栏的"段落"→"警告框"菜单命令,选择不同类型的警告框,可以快速插入相应的语法结构。然后只需补充正文内容即可,如图所示。

此功能可以用于创建不同样式的警告框,如提示、注意、警告或错误,有效组织和呈现文档信息。
5、目录
Typora可以在实时预览模式下快速生成文章目录。只需在编辑区输入TOC并按下回车键,Typora就会自动提取文档中的各级标题,生成一个可导航的目录。
目录(Table of Contents,TOC)会根据文档标题的层级结构自动创建,并在修改标题时同步更新,确保目录始终与文档内容保持一致,如图所示。

6、图表
Typora具备强大的图表绘制能力,支持多种流行的文本绘图工具,包括flowchart.js、js-sequence-diagrams和Mermaid。其中,Mermaid因其广泛的应用和强大的功能而备受推崇,我们将重点介绍它。
Mermaid允许我们通过类似Markdown的简洁文本语法创建和动态修改各种图表,例如序列图、流程图、甘特图、饼图和思维导图等。在使用Mermaid之前,请务必在Typora的设置中启用Markdown的图表扩展语法。在使用Mermaid图表时,请注意以下几点。
- 兼容性:图表是Typora的一项扩展功能,并非所有Markdown编辑器都支持。标准的Markdown、CommonMark和GFM不包含此功能。
- 跨平台使用:如果需要在不支持Mermaid的平台中展示图表,那么建议先将图表截图,然后以图片形式插入,这样可以确保不同平台上的兼容性。
- 导出格式:将文档导出为HTML、PDF、epub或docx格式时,图表通常可以正常显示。但导出为其他格式时,可能无法保证图表的正常显示。
接下来,让我们通过一些示例来了解Mermaid的基本用法。
6.1、Mermaid时序图
Mermaid的时序图以关键词sequenceDiagram开头。可以使用->>表示实线箭头,-->>表示虚线箭头。要添加备注,可以使用"Note right of\|left of\|over 参与者:内容"的语法,如图所示。

6.2、Mermaid流程图
Mermaid的流程图以关键词graph开头,并在其后指定图表的布局方向,常用的方向参数包括TB(Top to Bottom,从上到下)、BT(Bottom to Top,从下到上)、RL(Right to Left,从右到左)和LR(Left to Right,从左到右),如图所示。

6.3、Mermaid甘特图
甘特图是一种将活动与时间关联的可视化工具,能够清晰地展示每个活动的持续时间。它常被用于项目管理中,帮助管理者把控项目进度,明确各项任务的开始和结束时间。
在Mermaid中,甘特图以关键词gantt开头,通常包含图表的标题(title)、日期格式(dateFormat),以及各事项(section)及其细分任务的时间信息,如图所示。

6.4、Mermaid饼图
Mermaid的饼图以关键词pie开头,可以使用title关键字指定饼图的标题,然后列出各扇区的名称及其对应的数据值,如图所示。

6.5、Mermaid思维导图
Mermaid的思维导图以关键词mindmap开头,节点之间的层级关系通过缩进表示,根节点需要以root关键字开始。可以通过在节点内容两侧添加特定的符号来定义节点的形状。
- 节点内容:表示正方形。
- (节点内容):表示圆角正方形。
- ((节点内容)):表示圆形。
- ))节点内容((:表示爆炸形状。
- )节点内容(:表示云朵形状。
如果节点内容没有被任何符号包裹,那么将使用默认的形状,Mermaid思维导图如图所示。

除了以上介绍的,Mermaid还支持状态图、类图、Git图等更多图表类型。如果想了解更多Mermaid的用法,那么请在GitHub上搜索mermaid-js/mermaid进行查阅。