为了账号安全,请及时绑定邮箱和手机立即绑定

优秀的Markdown引擎-MUME

标签:
Html/CSS

因项目需要,尝试了[markdown.js]和[GitHub的Markdown Web API],都不尽如人意,于是将目标对准了大名鼎鼎Markdown Preview Enhanced插件,翻其源码,最终挖出的背后功臣MUME。
如此优秀的Markdown引擎,其在GitHub上的Star仅有83个,着实让人意外。

调用简单

以导出为html为例:

//引入const mume = require("@shd101wyy/mume");async function main() {  // 初始化
  await mume.init();  
  // 创建Markdown Engine实例
  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
    },
  });  // 导出Markdown为html格式
  await engine.htmlExport({ offline: false, runAllCodeChunks: true });
}
main();

上面代码中完成了mume的导入初始化源文件指定目标样式指定导出

功能强大

导出多种格式

在官方示例代码中可以清晰的看到:

  // 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 });

自带丰富样式

  • 预览样式

    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"
    • 几个样例


      webp

      mume-demo1.png

webp

mume-demo2.png

webp

mume-demo3.png

webp

mume-demo4.png

webp

mume-demo5.png

支持数学公式渲染

  • KaTeX渲染库

  • MathJax渲染库

导出代码易用

MUME导出的html代码结构清晰,便于修改再利用


webp

mume-htmlcode.png



作者:jingkanghou
链接:https://www.jianshu.com/p/69b7b5c0f991


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消