Typora——段落排版

段落排版

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进行查阅。

相关推荐
zzzzzz31017 小时前
一篇文章发五个平台:我用 TRAE Work 搭了条内容分发流水线,2 小时变 20 分钟
人工智能·markdown
染指111011 天前
79.高级RAG-md文档元素分割器
markdown·rag·llama_index·llamaindex
大数据张老师16 天前
Typora 导出 Word 模版操作手册
开发语言·c#·word·typora
suaizai_23 天前
HTML为何碾压Markdown?AI时代新选择
markdown
前端逗比逗25 天前
流式 Markdown 解析 + 代码块防截断闪烁
markdown·webassembly
清风小道君1 个月前
手搓一个零依赖的 Markdown 静态站点生成器,我学到了什么
markdown
X档案库1 个月前
【开源】我做了一套可以 AI 托管的 Markdown 博客与知识库
rust·博客·markdown·marksharex
DeMinds1 个月前
内容没有丢,我为什么总在重新整理?|DeMinds 如何让工作接着继续
ios·github·markdown
acheding1 个月前
File System Access API 实战:让网页真正读写本地文件
前端·javascript·vue.js·编辑器·markdown