vscode搭建markdown写作及导出环境

本文转自本人的CSDN博客

本文所用插件如下

markdown all in one 和mpe是广为流传的插件，不多解释。
而markdown pdf 是我尝试多种组合后，觉得较为方便的一种生成好看的pdf的方式，因为我的需求是： 自定义pdf css和高亮，自定义页眉页脚。

配置其他插件还算简单，配置mpe可以参考插件官方文档

配置markdown pdf 是我们的重点，因为我们要求生成的pdf可以自定义页眉页脚和css。

右键插件打开设置，如下，可以按css的模式设置我们的页眉页脚，下方即是代码高亮设置，可以按自己需求配置

我的示例如下

footer

1	<div style="font-size: 9px; margin: 0 auto;">Page <span class='pageNumber'></span> of <span class='totalPages'></span></div>

header

1	<div style="font-size: 9px; margin-left: 1cm;"> <span class='doctitle'></span></div> <div style="font-size: 9px; margin-left: auto; margin-right: 1cm; "> <span class='date'></span></div>

如上图，可以输入自定义的css文件。我们可以自己写，也可以去找好看的css资源来修改，这里推荐typora的主题官网

同时，记得勾上print background选项，否则md的一些分界线会无法打印

其他的配置就自行探索了，毕竟我的需求就这些

完成之后，重启vscode，右键应该可以看到如下

可以右键点击markdown pdf，生成我们想要的pdf（或者图片）
或者使用MPE打开预览也可以生成

如图，在预览界面右键，可以使用chrome自带的pdf生成器生成。
同时，也可以选择在浏览器中打开，然后使用浏览器自带的打印功能生成pdf

这里解释为什么我选择markdown pdf，而不用mpe自带的

因为我的需求特殊，我试了使用mpe自带的：

如果在浏览器中打开并打印，要么无法生成页眉页脚，要么页眉页脚无法自定义，edge和chrome会在页脚中包含文件路径，很不美观
如果使用chrome自带的打印，同上理
如果使用prince，虽然可以生成很好看的满意的pdf，但是会在第一页右上角有prince水印，并且我寻找了好久也没找到去掉水印的方法（有同志知道的话可以评论一下，感激万分）
ebook和pandoc懒得试了……

按照如上配置，即可在vscode中使用markdown编写，并且生成自定义页眉页脚和css的pdf文件。