vscode MPE puppeteer导出pdf的数学公式显示问题

Vs Code MPE Puppeteer 导出pdf问题

这几天在用vs code写markdown的时候，写完后按照习惯，使用Markdown Preview Enhanced预览，随后在预览界面，鼠标右键，选择Chrome(Puppeteer)，再选择PDF导出pdf文件，结果奇怪的是，导出来的文件中的数学公式全都不显示了。

图1：问题输出

搜索了很久，找了很多的解决方法，下面一一展示。

法一：使用Markdown PDF插件

安装过程略去，安装后还需要修改setting.json，在json中添加"markdown-pdf.executablePath": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"，该路径是本机chrome浏览器的路径，视自己的情况修改。

下一步，改模板文件。找到C:\Users\用户名\.vscode\extensions\yzane.markdown-pdf-1.4.4\template，文件夹下有个template.html文件，在</body>后、</html>前加上

<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>

算了截个图看一下。

图2：修改后的模板文件

这样配置就结束了，然后在源文件上右键，选择Markdown PDF:Expot PDF即可。

点评：配置麻烦，输出速度很慢，并且效果一般，输出的数学公式并不美观。

法二：使用chrome浏览器

该方法很简单，仍是使用MPE(Markdown Preview Enhanced)插件，预览，然后选择Open in Browser，就是用浏览器打开了，ctrl + P打印即可。

不过生成倒是生成了，就是步骤繁琐，并且生成后的PDF文件文字不可选中，或者说选中字体变大？反正就是不能精确选中到某个字符，效果不好。

法三：添加头文件

其他不变，仍旧使用MPE插件，改变就是在文件最前方添加以下代码：

<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>

继续使用MPE预览后生成PDF即可。但是，每次写文档都要添加一次，很麻烦。

法四：修改MPE中的time out

这个方法是我在github上MPE插件库的Issue中找到的。原来方法的优点在于，Puppeteer生成pdf的速度很快，这也是问题所在——它太快了，以至于数学插件还没生效，MPE插件就生成pdf完成了。因此，解决问题的步骤如下：

第一步，打开设置，找到MPE插件。

图3：修改MPE的setting

注意大方框中的数值，原来是0，将其修改为3000即可，意思是等待3秒后生成pdf。

看下结果。

图4：输出结果

可以看到已经完美解决了。