本篇博客主要分享一下使用VSCode的Markdown PDF插件(如图)如何设置导出效果。
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>
需要注意的是,这种方法是调用了网络上MathJax库来在浏览器中渲染LaTeX公式,因此在网络不稳定的情况下会导出失败,也不支持很复杂的LaTeX语法。理论上如果你本地有LaTeX编译器的话,应该也可以进行相应的设置,这样就不用依赖网络了。