关于Markdown

Author Avatar
Arony 11月 01, 2017

2018/3/23 更新

后来找到好几个支持 Markdown 导出 PDF 的工具,都已经添加第一点中,所以好像这个项目也没什么用了。

留个记录吧。

一、MarkDown工具

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

  • vscode:仅有一个优点,代码编辑器,快捷键用到爽。
  • 简书:云同步,预览也好看,图片插入也不是问题,但是不能导出,数据放别人那总有点不安心。
  • Cmd Markdown:云同步,预览好看,但是导出和插图要付费。
  • HexoEditor:国内插图的一个完美解决方案,还可以导出PDF,但是暂不支持云同步。
  • Typora:写 Markdown 最爽的,图片存本地,也是一种比较好的解决方案,导出也OK。

其实我个人觉得 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文件补足样式

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

带样式的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做的好的。因此结合此两者的样式就可以得到一个漂亮的样式了。

简书下用alt作为图片的名字

因此可以进一步修改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显示效果如下:

image.png

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

第四步:将html转换为pdf

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

  1. 用chrome浏览器,Ctrl+P,然后点击更改,可以选择保存为PDF,但是这样导出的PDF没有样式,不推荐,不过也在此提一下;
  2. PDFCROWD,这个可以导出带样式的,但是需要先将html文件带上样式都传到服务器上,然后把链接给过去,缺点是不付费的话导出的pdf纸张大小很奇怪,还每一页都加上了水印,也不推荐。
  3. EXPERT,这个可以完美的导出带样式的PDF,但是要求先把html文件和样式传到服务器上,然后给出链接。推荐给有服务器的同学。
  4. wkhtmltopdf,最推荐的一个,本地安装一下,然后敲个命令行就可以了。
    wkhtmltopdf 本地或网上页面的地址 要导出的路径
    

    四、github项目地址

    github项目地址