自从学了markdown，从此特别喜欢用markdown写东西，用过的工具有:

这些些Markdown的工具里首推前三个，vscode不用说为什么。简书是因为自动保存和版本控制很方便，同时是在线保存的，上传图片也是最方便的，不需要再去找图床，只要有浏览器就可以随时接着写。Cmd Markdown是兼具简书的优点，是增强型的markdown语法，支持流程图和甘特图等，还能导出成多种格式的文件。

Markdown用的多了，有时候要给其他人写一些文档就很不适应再用Word啥的，但是又不能要求别人能够把md文件拖到解析markdown的工具里显示，于是导出成PDF就成了一种比较好的解决方案。于是问题来了？

如何方便的将markdown文件导出成漂亮的PDF文件？

市面上大多数将markdown导出成pdf的工具都需要开会员，于是我找了两个方法来解决这个问题。

上面的集中书写工具中，vscode可以通过安装Markdown PDf插件，将markdown格式的文件导出成PDF，同时支持自定义markdown的样式，成了一种不错的解决方案，但是需要自己写css样式或者去网上找比较漂亮的样式，否则导出的PDF文件美观程度上实在差强人意。

在window系统下，通过上面的步骤就可以了，但是在Linux或者MAC下，安装后右键--convert to pdf会报错：ERROR: phantomjs binary does not exist: /Users/username/.vscode/extensions/yzane.markdown-pdf-0.1.7/node_modules/phantomjs-prebuilt/lib/phantom\bin\phantomjs.exe 这时候需要安装phantomjs才可以使用： MAC：brew install phantomjs Linux：sudo apt-apt install phantomjs

第二种方法比较复杂，但是可以导出比较漂亮PDF文件，并且支持甘特图和流程图等，当然如果第一种方法有比较漂亮的CSS样式且不需要用太多复杂的加强markdown语法，就还是建议用第一种方案，毕竟更简单。

Cmd Markdown 支持导出无样式的html、有样式的html、PDF，但是后两者需要开通会员，不用去考虑。就选择导出为无样式的html，导出后得到的显示效果如下：

这样得到的html文件没有样式并不好看，哪去哪找漂亮的样式呢？答案是Cmd Markdown 自己的带样式网页。 从这个页面上把css下载过来，link到不带样式的html文件中，得到带样式的网页：

但是还存在一个问题，link了CSS文件后，内容的显示占了屏幕的100%宽度，并不好看 ，自己对比之后发现官方的页面中id为wmd-preview的元素的Class为wmd-preview wmd-preview-full-reader，而导出的无样式文件不含wmd-preview-full-reader这个class，可以用js插入这个class：

Cmd Markdown的官方样式已经很漂亮了，但是比较简书，有一点美中不足，简书中插入的图片下面会有一个图片的alt作为图片的标题，可以让文档看起来更清晰，还有其他的一些细节也是比Cmd Markdown做的好的。因此结合此两者的样式就可以得到一个漂亮的样式了。

因此可以进一步修改Cmd Markdown的官方样式，使其拥有简书的效果，代码如下： Js修改样式：

复制简书该图片效果的样式到myCss.css中

修改后得到的html显示效果如下：

自此，就成功的将markdown转变成了比较漂亮的html文件。样例地址 这时候可以把文件上传到gitpage或者自己的服务器，然后得到链接就能发给其他人看了，但是一般大家也不会用html文件来作为互相发送的文档（虽然我个人觉得这样用起来也可以），所以继续下一步：将html转换为pdf。

在网上找了很久，将html转换为html大多也是要付费的，但也有免费而且效果不错的，下面列举出来：

自修改的样式和示例文件