[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号

目录

文章较长，请点击书签浏览感兴趣的内容。

CSDN的渲染与Typora未必一致，下面所有功能都在Typora上测试成功。

前言

• BP，即Best Practice，最佳实践，记录一些我在使用Typora时的技巧，以期帮助更多的人。
• 标题中强调了是Typora而不是Markdown，是因为Markdown只是一种标记语言，不同的编辑器对其的渲染策略是不一样的。Typora基于Electron，本质上是一个魔改过的Chromium浏览器（不信可以用Shift+F12打开Console). 所以下面介绍的技巧很多是前端的内容，是HTML/CSS的特性发挥的作用而不是Markdown本身的特性，在其他编辑器中可能有用也可能没有用。
• 笔者现在基本都使用Markdown来写文章，本地的编辑器基本都用Typora，无论是实验报告、个人随笔还是技术分享。期间也尝试过一些其他的方案，比如Notion，但是直到其能够完全在本地工作之前，我不会将其作为首选。
• Markdown满足了我对写作的期待，其借助语法标记实现格式控制，而不是虚无缥缈的按钮与快捷键。并且作为文本格式，能很好地进行版本控制，也方便编写脚本来生成。编写内容基本不用抬手去碰鼠标。

全局设置

• Typora的全局设置是通过修改css文件实现的。

  • css文件位置：选择文件->偏好设置->打开主题文件夹
  • 
  • 如果你只想要修改某一个主题下的css属性，那么就去修改<主题名>.css。
  • 如果你想让某个css属性在所有主题下都生效，那么就去修改base.user.css，如果没有，则新建该空文本文件并修改。
    • 

• 如果下面介绍的内容需要全局设置，笔者会特别标注。

• 所有对于css文件的修改都需要重启Typora才能生效。

效果类

修改字体、颜色、字体大小、行高等

• 借助CSS实现即可，可以使用<span>/<p>/<div>标签。
• 例子：使用Consolas字体，大小为30px，行高100px，红色加粗斜体。必须标注字体才能使用其他属性
  • <span style='font: bold italic 30px/100px "Consolas"; color:red;'>Test Message</span>
  • Test Message
• 还可以尝试更多的CSS属性，这里不再赘述。

文字居中(靠右)对齐

• 使用了HTML的<p>标签的align属性，也可以使用CSS.

• <p align='center'>这是一段测试文字</p>

  • 这是一段测试文字

• 或者使用CSS的text-align属性：<p style='text-align:center'>这是一段测试文字</p>'

  • 这是一段测试文字

• 右对齐改成将center改成right即可。

• <p align='right'>这是一段测试文字</p>

  • 这是一段测试文字

• 或 <p style='text-align:right'>这是一段测试文字</p>

  • 这是一段测试文字

图片转存至相对路径

• 这样做的好处是，无论是粘帖还是插入的本地/网络图片，都会在文档所在文件夹下的同名.assets文件夹保存副本，并且文档内插入的路径都是相对路径，方便对图片的统一管理和分享。
• 打开文件->偏好设置->图像，选择
  • 插入图片是，赋值图片到./${filename}.assets
  • 并设置优先使用相对路径、对本地图片应用、对网络图片应用、自动转义。
  • 

图片缩放

• Markdown标准的插入图片语法是![]()，这种语法本身并没有定义缩放，但是在Typora中，你有以下方式来做到。
• 这是一张没有处理过的图片（Go语言的吉祥物，一只地鼠）
  • 
• 右击图片，选择缩放图片（非100%，选择100%是不会有改变的），Typora会将![]()改成<img>标签来实现。这是最通用的做法。
  • <img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" />
  • 
  • 现在你也可以通过修改zoom的百分比来调整。
• 其他还有以下方法，可以到markdown中插入图片怎么定义图片的大小或比例？ - 知乎查看
  • 其他编辑器对Markdown的魔改。
  • 使用支持缩放的图床。
  • 使用CSS选择器来定义特殊记号。

图片居中

• 注意，你在Typora中默认看到的图片的位置与导出的PDF不一定一致。比如你粘贴时，在Typora中看到是居中的，但是导出时可能就变成靠左对齐了。

• 使用HTML的<center>标签即可

  • 最简单的方法，甚至可以粘贴多张图片居中。

• 首先将Mardown默认的![]()语法转换成<img>标签，参考图片缩放一节。右击选择缩放图片——比例选择非100%的任何一个即可。

• 然后在其前后增加<center></center即可，这样导出时也一定是居中的。

• <center><img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /></center>

  • 

• 甚至可以放多张图。

  • <center><img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /> <img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /> <img src="Typora%20Best%20Practice.assets/go_avatar.png" alt="Go Avatar" style="zoom:50%;" /></center>\

  • 

内容类

Excel的表格与Markdown表格的互转

• 这个其实和Typora没什么关系，只是讲一下怎么在不同表示的表格之间互转。

• 使用Table Convert Online - table to markdown,csv,json,latex table,excel,sql,xml在线工具。

• 选择右上角的Import，根据原数据的类型导入数据，点击Import Data.

• 

• 然后在页面底部找到需要导出的格式即可。

mermaid相关

使用特殊文字

• 如果文本中包含引号、括号等，需要用双引号括起来。

  •   graph LR;
      node["如果不加引号，这个节点无法生成"]
    

• 如果文本中有些特殊符号不好打出，可以使用Unicode编码代替，语法为#<Unicode>编码;

  •   graph LR;
      node["#10084;"]