因项目需要,尝试了[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"
几个样例
mume-demo1.png
mume-demo2.png
mume-demo3.png
mume-demo4.png
mume-demo5.png
支持数学公式渲染
KaTeX渲染库
MathJax渲染库
导出代码易用
MUME导出的html代码结构清晰,便于修改再利用
mume-htmlcode.png
作者:jingkanghou
链接:https://www.jianshu.com/p/69b7b5c0f991
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦