一、MarkDown工具排行
自从学了markdown，从此特别喜欢用markdown写东西，用过的工具有:
这些些Markdown的工具里首推前三个，vscode不用说为什么。简书是因为自动保存和版本控制很方便，同时是在线保存的，上传图片也是最方便的，不需要再去找图床，只要有浏览器就可以随时接着写。Cmd Markdown是兼具简书的优点，是增强型的markdown语法，支持流程图和甘特图等，还能导出成多种格式的文件。
二、导出成PDF
Markdown用的多了，有时候要给其他人写一些文档就很不适应再用Word啥的，但是又不能要求别人能够把md文件拖到解析markdown的工具里显示，于是导出成PDF就成了一种比较好的解决方案。于是问题来了？
如何方便的将markdown文件导出成漂亮的PDF文件？
市面上大多数将markdown导出成pdf的工具都需要开会员，于是我找了两个方法来解决这个问题。
三、两种导出漂亮PDF文件的方法
1. 通过vscode插件
上面的集中书写工具中，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
2. 通过Cmd Markdown导出的无样式html
第二种方法比较复杂，但是可以导出比较漂亮PDF文件，并且支持甘特图和流程图等，当然如果第一种方法有比较漂亮的CSS样式且不需要用太多复杂的加强markdown语法，就还是建议用第一种方案，毕竟更简单。
第一步：将markdown转换为html文件
Cmd Markdown 支持导出无样式的html、有样式的html、PDF，但是后两者需要开通会员，不用去考虑。就选择导出为无样式的html，导出后得到的显示效果如下：
第二步：将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：
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 修改样式
$("#wmd-preview").addClass("wmd-preview-full-reader");
})
});
</script>
第三步：将html页面进一步美化
Cmd Markdown的官方样式已经很漂亮了，但是比较简书，有一点美中不足，简书中插入的图片下面会有一个图片的alt作为图片的标题，可以让文档看起来更清晰，还有其他的一些细节也是比Cmd Markdown做的好的。因此结合此两者的样式就可以得到一个漂亮的样式了。
因此可以进一步修改Cmd Markdown的官方样式，使其拥有简书的效果，代码如下：
Js修改样式：
<link href="../static/assets/myCss.css" rel="stylesheet" media="screen">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 修改样式
$("#wmd-preview").addClass("wmd-preview-full-reader");
$("body").css("background-color", "#fcfaf2");
$(".white-blockquote").css("background", "whitesmoke");
$("body").css("background-color", "#fcfaf2");
$("h1,h2,h3,h4,h5,h6").css("font-weight", "700");
$("pre.prettyprint").css("background-color", "whitesmoke");
$(".theme-white").css("background-color", "#e5e5e5");
$(".theme-white.sequence-diagram [fill='#ffffff'], .theme-white.flow-diagram [fill='#ffffff']").css("fill", "#e5e5e5");
$("img").parent().addClass("image-package")
$("img").each(function () {
var that = $(this);
var alt = that.attr("alt");
var add = '<br><div class="image-caption">'+ alt +'</div>';
var html = that.parent().html() + add;
that.parent().html(html);
})
});
</script>
复制简书该图片效果的样式到myCss.css中
.image-package {
padding-bottom: 25px;
text-align: center;
}
.image-caption {
min-width: 20%;
max-width: 80%;
min-height: 22px;
display: inline-block;
padding: 10px;
margin: 0 auto;
border-bottom: 1px solid #d9d9d9;
font-size: 14px;
color: #969696;
line-height: 1.7;
}
修改后得到的html显示效果如下：
自此，就成功的将markdown转变成了比较漂亮的html文件。样例地址
这时候可以把文件上传到gitpage或者自己的服务器，然后得到链接就能发给其他人看了，但是一般大家也不会用html文件来作为互相发送的文档（虽然我个人觉得这样用起来也可以），所以继续下一步：将html转换为pdf。
第四步：将html转换为pdf
在网上找了很久，将html转换为html大多也是要付费的，但也有免费而且效果不错的，下面列举出来：
- 用chrome浏览器，Ctrl+P，然后点击更改，可以选择保存为PDF，但是这样导出的PDF没有样式，不推荐，不过也在此提一下；
- PDFCROWD，这个可以导出带样式的，但是需要先将html文件带上样式都传到服务器上，然后把链接给过去，缺点是不付费的话导出的pdf纸张大小很奇怪，还每一页都加上了水印，也不推荐。
- EXPERT，这个可以完美的导出带样式的PDF，但是要求先把html文件和样式传到服务器上，然后给出链接。推荐给有服务器的同学。
- wkhtmltopdf，最推荐的一个，本地安装一下，然后敲个命令行就可以了。
wkhtmltopdf 本地或网上页面的地址 要导出的路径
