/md2img

markdown to image

Primary LanguageTypeScriptMIT LicenseMIT

markdown2image

NPM Downloads NPM Version License Dependency Status devDependency Status Code Style

transform markdown to img

Installation

# install it globally
$ npm install -g markdown2image

# or yarn
$ yarn global add markdown2image

Usage

Basic Usage

$ markdown2image <input> [-o|--output] [-w|--width]
Create img complete.

Advanced Usage

使用自己的模板

在根目录添加 .md2imgrc 文件作为模板

.md2imgrc example:

  • {{fragment}} 不可修改
  • {{layout}} 替换为要使用的 md 样式
    • eg: https://unpkg.com/github-markdown-css
  • {{highlight}} 替换为要使用的代码高亮样式
    • eg: https://unpkg.com/prismjs/themes/prism-okaidia.css
    • 参考 Prism
  • 其他布局和样式可按需求编写
template: >
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{{layout}}" />
    <link rel="stylesheet" href="{{highlight}}">
    <style>
      .markdown-body {
        width: 90%;
        max-width: 700px;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div class="markdown-body">
      {{fragment}}
    </div>
    <script src="https://unpkg.com/prismjs"></script>
  </body>
  </html>

License

MIT © mashaoliang