因項(xiàng)目需要，嘗試了[markdown.js]和[GitHub的Markdown Web API]，都不盡如人意，于是將目標(biāo)對(duì)準(zhǔn)了大名鼎鼎Markdown Preview Enhanced插件，翻其源碼，最終挖出的背后功臣MUME。
如此優(yōu)秀的Markdown引擎，其在GitHub上的Star僅有83個(gè)，著實(shí)讓人意外。

閱讀原文

調(diào)用簡(jiǎn)單

以導(dǎo)出為html為例：

//引入
const mume = require("@shd101wyy/mume");

async function main() {
  // 初始化
  await mume.init();
  
  // 創(chuàng)建Markdown Engine實(shí)例
  const engine = new mume.MarkdownEngine({
    filePath: "/Users/wangyiyi/Desktop/markdown-example/test3.md",
    config: {
      previewTheme: "github-light.css",
      codeBlockTheme: "default.css",
      printBackground: true,
      enableScriptExecution: true, // <= for running code chunks
    },
  });

  // 導(dǎo)出Markdown為html格式
  await engine.htmlExport({ offline: false, runAllCodeChunks: true });
}
main();

上面代碼中完成了mume的導(dǎo)入，初始化，源文件指定，目標(biāo)樣式指定及導(dǎo)出

功能強(qiáng)大

導(dǎo)出多種格式

在官方示例代碼中可以清晰的看到：

  // open in browser
  await engine.openInBrowser({ runAllCodeChunks: true });

  // html export
  await engine.htmlExport({ offline: false, runAllCodeChunks: true });

  // chrome (puppeteer) export
  await engine.chromeExport({ fileType: "pdf", runAllCodeChunks: true }); // fileType = 'pdf'|'png'|'jpeg'

  // phantomjs export
  await engine.phantomjsExport({ fileType: "pdf", runAllCodeChunks: true }); // fileType = 'pdf'|'png'|'jpeg'

  // prince export
  await engine.princeExport({ runAllCodeChunks: true });

  // ebook export
  await engine.eBookExport({ fileType: "epub" }); // fileType=`epub`|`pdf`|`mobi`|`html`

  // pandoc export
  await engine.pandocExport({ runAllCodeChunks: true });

  // markdown(gfm) export
  await engine.markdownExport({ runAllCodeChunks: true });

自帶豐富樣式

• 預(yù)覽樣式

  previewTheme: 'github-light.css',
  // "atom-dark.css",
  // "atom-light.css",
  // "atom-material.css",
  // "github-dark.css",
  // "github-light.css",
  // "gothic.css",
  // "medium.css",
  // "monokai.css",
  // "newsprint.css",
  // "night.css",
  // "none.css",
  // "one-dark.css",
  // "one-light.css",
  // "solarized-dark.css",
  // "solarized-light.css"
  // "vue.css"
  

• 代碼塊樣式

  codeBlockTheme: 'auto.css',
  //  "auto.css",
  //  "default.css",
  //  "atom-dark.css",
  //  "atom-light.css",
  //  "atom-material.css",
  //  "coy.css",
  //  "darcula.css",
  //  "dark.css",
  //  "funky.css",
  //  "github.css",
  //  "hopscotch.css",
  //  "monokai.css",
  //  "okaidia.css",
  //  "one-dark.css",
  //  "one-light.css",
  //  "pen-paper-coffee.css",
  //  "pojoaque.css",
  //  "solarized-dark.css",
  //  "solarized-light.css",
  //  "twilight.css",
  //  "vue.css"
  //  "vs.css",
  //  "xonokai.css"
  

  • 幾個(gè)樣例

    
    
    mume-demo1.png

mume-demo2.png

mume-demo3.png

mume-demo4.png

mume-demo5.png

支持?jǐn)?shù)學(xué)公式渲染

• KaTeX渲染庫(kù)
• MathJax渲染庫(kù)

導(dǎo)出代碼易用

MUME導(dǎo)出的html代碼結(jié)構(gòu)清晰，便于修改再利用

mume-htmlcode.png

其他

更多功能請(qǐng)見官方GitHub庫(kù)說(shuō)明