PhantomJS 导出

PhantomJS 支持 pdf，jpeg，以及 png 文件的导出。

在使用这个特性之前，请确保你已经安装好了 phantomjs。

  • Windows
    请查看 PhantomJS 官网。
  • macOS
    brew install phantomjs

使用

右键点击预览，然后点击 PhantomJS。
选择你想要导出的文件类型。

screen shot 2017-07-14 at 1 37 38 am

设置

全局设置

你可以通过 Markdown Preview Enhanced: Open PhantomJS Config 命令，来打开并修改 phantomjs_config.js 文件。

phantomjs_config.js 文件位于 ~/.mume/phantomjs_config.js

phantomjs_config.js 应该如下： 

  1. 'use strict'
  2. /*
  3. configure header and footer (and other options)
  4. more information can be found here:
  5.     https://github.com/marcbachmann/node-html-pdf
  6. Attention: this config will override your config in exporter panel.
  8. eg:
  10.   let config = {
  11.     "header": {
  12.       "height": "45mm",
  13.       "contents": '<div style="text-align: center;">Author: Marc Bachmann</div>'
  14.     },
  15.     "footer": {
  16.       "height": "28mm",
  17.       "contents": '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>'
  18.     }
  19.   }
  20. */
  21. // you can edit the 'config' variable below
  22. let config = {
  23. }
  25. module.exports = config || {}

单一文件设置

你可以编写 front-matter 来对设置 phantomjs： 

  1. ---
  2. phantomjs:
  3.   orientation: landscape
  4. ---

查看 node-html-pdf 了解更多信息。

自定义 CSS

cmd-shift-p 然后运行 Markdown Preview Enhanced: Customize Css 命令打开 style.less 文件后，添加并修改以下的代码： 

  1. .markdown-preview.markdown-preview {
  2.   // custom phantomjs png/jpeg export style
  3.   &.phantomjs-image {
  4.     // 你的代码
  5.   }
  7.   //custom phantomjs pdf export style
  8.   &.phantomjs-pdf {
  9.     // 你的代码
  10.   }
  11. }

保存时自动导出

添加 front-matter 如下： 

  1. ---
  2. export_on_save:
  3.   phantomjs: true
  4.   // or
  5.   phantomjs: "pdf"
  6.   phantomjs: "jpeg"
  7.   phantomjs: "png"
  8.   phantomjs: ["pdf", "png", ...]
  9. ---

这样每次当你保存你的 markdown 文件时，PhantomJS 将会自动运行。