vscode+markdown+mpe+markdown pdf写markdown文档并生成pdf的解决方案和配置方法

本文将介绍使用vscode的插件markdown all in one +markdown preview enhanced(MPE)+ markdown pdf来配置markdown写作环境的过程

选择这些插件的原因

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

---

配置插件：

1. vscode下载上述插件
2. 配置插件设置

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

https://shd101wyy.github.io/markdown-preview-enhanced/

配置markdown pdf

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

1、配置页眉页脚

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

我的示例如下
footer

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

header

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

2、配置css

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

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

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

生成pdf的方式

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

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

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

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

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

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

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

参考文章：

https://blog.csdn.net/while0/article/details/124677531