VSCode的Markdown PDF插件导出效果设置

沉睡的卡鳄

已于 2023-09-17 17:24:45 修改

阅读量3.4k

点赞数 16

文章标签： vscode css pdf

于 2023-07-01 21:24:07 首次发布

本文链接：https://blog.csdn.net/KARLGong/article/details/131494671

版权

Markdown PDF插件的问题

Markdown PDF插件让人不舒服的地方就是它默认的导出效果不好，如图所示：
在这里插入图片描述

可见，它的中文字体比较奇怪，代码框没有背景色，LaTeX风格的公式也渲染不出来。

打开Markdown PDF插件的设置

在VSCode打开Extensions，找到Markdown PDF，点击Extensions Settings，就可以打开它的设置面板。设置Footer、Header、页边距、导出目录等没有太大问题，就不赘述了，下面主要说说如何设置整体风格和代码高亮。

另外，VSCode的Markdown PDF插件的安装目录为C:\\Users\username\.vscode\extensions\yzane.markdown-pdf-1.4.x (这是Windows下的目录, Mac类似)。

整体风格设置

在设置面板中，找到"Markdown-pdf: Styles"选项，点击Add Item：
在这里插入图片描述
可以用自定义的css文件来控制导出pdf的整体渲染风格，也可以从网上直接下载现成的css文件。分享 个人比较喜欢的设置。

有了css模板后，也可以根据自己的喜好进行一些微调：

调整字体和字号：

body {
  font-family: "consolas", "微软雅黑"，"KaiTi", Georgia,Serif; /*字体*/
  font-size: var(--vscode-markdown-font-size, 14px); /*字号*/
}

调整行内代码高亮：

:not(pre) > code {
  color: #B22222; /*代码颜色*/
  background-color:#FFFFFF; /*代码的背景色*/
  border: 0px solid #ccc; /*边界宽度*/
  border-radius: 5px; /*代码背景的圆角矩形半径*/
  padding: 2px; /*填充厚度，可以理解为代码背景矩形的宽度*/
}

RGB色值对照
这里不必对代码块的高亮进行设置（设置了也没用），因为Markdown PDF还有下述另一个配置文件专门控制代码块的渲染

代码块高亮设置

在设置面板中，找到"Markdown-pdf: Highlight Style"选项，下拉选择即可。这个css文件的配置会基本覆盖掉上述整体Styles的css文件关于代码块的配置（如果有的话）。
在这里插入图片描述
Markdown PDF为我们提供了许多的代码块风格，但我们也许还想基于此进行一些微调。我们只需要找到这些css文件的位置并进行一些修改即可：

Windows的路径为C:\\Users\username\.vscode\extensions\yzane.markdown-pdf-1.x.x\node_modules\highlight.js\styles
Mac路径为/Users/username/.vscode/extensions/yzane.markdown-pdf-1.x.x/node_modules/highlight.js/styles

LaTeX公式的渲染设置

Markdown PDF插件的默认配置是无法识别并渲染LaTeX公式的，但是我们可以通过更改其配置文件做到这一点，具体做法如下：

找到template.html文件，路径如下：
Windows：C:\Users\username\.vscode\extensions\yzane.markdown-pdf-1.x.x\template
Mac：/Users/username/.vscode/extensions/yzane.markdown-pdf-1.x.x/template
添加如下两行代码：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });</script>