ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Typora——段落排版

Typora——段落排版 段落排版1、表格2、代码块3、公式块4、警告框5、目录6、图表6.1、Mermaid时序图6.2、Mermaid流程图6.3、Mermaid甘特图6.4、Mermaid饼图6.5、Mermaid思维导图Typora提供了全面且便捷的段落格式化功能涵盖了标题、表格、代码块、公式块、引用、列表、分割线、目录等常用元素。我们可以通过菜单栏的“段落”选项浏览和使用这些功能但更高效的方式是直接采用Markdown语法或快捷键如表所示。1、表格直接使用Markdown的表格语法确实有些复杂管理和维护也不方便Typora在表格的处理上堪称业界典范。例如在创建表格时无须记忆复杂语法只需使用快捷键OptionCommandTmacOS系统或CtrlTWindows/Linux系统即可快速插入表格如图所示。若需调整表格的行数、列数及对齐方式那么可将光标置于表格内此时表格左上方将显示操作菜单直接调整即可如图所示。2、代码块在Typora中插入代码块的常用方法是使用围栏代码块。输入三个反引号后紧接着输入编程语言的名称Typora会触发自动联想功能帮助我们快速选择所需的语言代码块如图所示。若要配置代码块的显示方式例如是否显示行号、启用自动换行、设置代码缩进以及指定默认的代码块语言那么请进入Typora的设置界面单击“Markdown”选项卡在“代码块”选项组中进行详细设置如图所示。值得注意的是Typora的代码块支持diff语法这对于标记代码或文本的更改新增和删除非常有用方便进行版本比较和协同开发diff语法如图所示。3、公式块Typora内置了对数学公式的强大支持它能够通过解析Tex和LaTeX语法将复杂的数学表达式清晰地渲染出来。只需要将数学公式用双美元符号$$包裹起来即可创建公式块。语法如下。公式块的效果如图所示。4、警告框Typora支持GFM警告框语法用于突出显示重要信息。通过单击菜单栏的“段落”→“警告框”菜单命令选择不同类型的警告框可以快速插入相应的语法结构。然后只需补充正文内容即可如图所示。此功能可以用于创建不同样式的警告框如提示、注意、警告或错误有效组织和呈现文档信息。5、目录Typora可以在实时预览模式下快速生成文章目录。只需在编辑区输入[TOC]并按下回车键Typora就会自动提取文档中的各级标题生成一个可导航的目录。目录(Table of ContentsTOC)会根据文档标题的层级结构自动创建并在修改标题时同步更新确保目录始终与文档内容保持一致如图所示。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开头并在其后指定图表的布局方向常用的方向参数包括TBTop to Bottom从上到下​、BTBottom to Top从下到上​、RLRight to Left从右到左和LRLeft 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进行查阅。
返回列表