VSCode+Markdown pdf及格式优化

更新

现在很少用 Markdown PDF 插件了，更常用的是 Markdown Preview Enhanced 插件，默认的预览和PDF效果已经能满足日常使用，也支持 mermaid 图，功能多多。

导出PDF 需要搭配 Chrome 浏览器，实际上基于Chromium内核的浏览器都可以。这意味着win10自带的Edge或者360系列的很多浏览器都可以直接用，不需要单独下载Chrome。

预览

Markdown Preview Enhanced 有自己单独的预览。

设置浏览器

设置浏览器可以直接在设置里搜关键字，红圈里就是浏览器地址，这里我用的是自带的Edge。

导出PDF

预览界面右键，在设置了浏览器的情况下可以直接导出PDF，样式和浏览器中PDF的查看效果一样。
如下图（可以看到还有别的导出工具，有兴趣可自己设置）：

注意：
导出的PDF默认没有背景色，比如引用和代码块，预览是由灰色背景，导出PDF后可能就是白色。

• 解决方法：在设置里勾选打印背景色。
  

• 未勾选效果
  

• 勾选后效果
  

---

以下为原文

---

背景

• 接触Jupyter notebook后，对markdown进行了些了解。
• 准备以后用来写笔记和开发文档。
• 开发文档需要转为pdf格式供人查看。

1. 效果展示

---

2. 软件及插件下载

• VSCode

• Markdown PDF

  • 安装VSCode后，打开并安装Markdown PDF插件。

    如下图:

  

  • 插件安装成功后，等待chromium自动安装。

    vscode界面右下角有提醒，如下图：

  

  已安装chrom浏览器，或下载失败，则可在配置中指定chrom.exe路径。

  方法为：更改"markdown-pdf.executablePath"配置项的值为chrom程序路径。

---

3. 自定义css文件，优化中文显示

因直接导出时，pdf格式并不够美观，特别是中文字体有很大问题，采用自定义css样式来美化。
需要把css文件路径写在"markdown-pdf.styles"配置中。

参考：

• 网上找到的一款比较漂亮的css格式文件，原地址请点击这里。并基于自身需求进行了一些修改。因本人对html和css都不熟悉，最后并没有达到想要的效果。

  • 重新设置了标题大小及字体

  • 更改部分颜色等

  最终css文件点击这里下载。

• 从这里试了些样式，最终使用markdown3进行了一些修改，包括字体、无序列表图标、分隔线、标题下划线。并加上了个人喜欢的分割线和下划线。

  修改下划线样式的时候费了番功夫，想把渐进效果的分割线用在标题下划线上，但自己改果然就是达不到效果= =最后搜到一种方法，加上自己尝试总算出来效果了。下次真不要费时间搞这个了，有这时间百度不如好好学学css…

  • 分割线参考这里

  • 渐变下划线参考这里

  最终使用的即这个版本，代码点击这里下载。

---

4. 编辑及导出

应该不用多说了吧- -