MarkdownText 插件是我为 Textrument 文本编辑器开发的 Markdown 实时预览插件。而后者 Textrument (图创文本)则是基于臭名昭著的开源编辑器 Npp 改制而来。
KnIfER:你没见过的多内核、多引擎Markdown编辑器来了!zhuanlan.zhihu.com为什么要自定义渲染引擎呢?Markdown 标准/风格不一,各种实现都拿来试试,才能选出最合适的。而且开放自定义后,甚至还可以用来做别的事情,比如显示 ASCIIDoc。
下面说说如何定制,只需稍微学习一点前端知识就可以掌握。
说起前端,第一印象就是及其强大的 JS 语言。MarkdownText 正是利用这种可以动态加载、动态执行的脚本语言实现其扩展特性的。好家伙,组件化插件,本身可以扩展的的插件,我愿称之为九九玄功。
这里给出一个最简单的例子,将编辑器中的文本实时渲染为 H5页面,即完成实时HTML预览功能:
- 第一步,在插件目录新建一个文件夹 HtmlViewer,名字就是渲染引擎扩展的名字。
- 第二步,在这个空文件夹内,新建一个 main.js 脚本。此时,该文件夹可被插件扫描感知到。重启编辑器或者点击插件菜单中的“切换渲染引擎:”,一个新的菜单条目, HtmlViewer 出现了!
- 第三步,编辑 main.js ,写入如下内容:
function init(name){
window.APMD=function(val) {
console.log('更新页面中……');
document.body.innerHTML=val;
}
}
解读,很简单:定义一个 init 方法,代表初始化渲染引擎的法门,之后“导出”一个 APMD 方法, 意思是 “Append Markdown”,附加在页面的 window 对象上。APMD 由插件调用,每次检测到编辑器的内容发生变化,插件都会调用此方法。
最后测试使用:打开刚才提到的插件菜单,点击“切换渲染引擎:”之下的“HtmlViewer”条目,插件会立即加载并初始化刚才自定义的渲染引擎。打开 .html 文件,选择“预览当前文件”就可以开始实时预览了,是不是很魔幻呢!
此例仅作参考,只能简单地预览HTML,不能加载外部脚本等资源。
不过,我随后又在 c++ 底层实现了功能较全的 HTML 预览功能,正在用它来继续制作的我浏览器项目——多聚浏览器的主页:
![0edaf49238d39d5cb5865827b2243f0e.png](https://img-blog.csdnimg.cn/img_convert/0edaf49238d39d5cb5865827b2243f0e.png)
现在可根据文件后缀名在HTML/MarkDown/AsciiDoc三种渲染模式间自动切换。
用来抄作业也十分方便呢!比如模仿 MathJax 的 annotation 对话框,用作简易 latex 代码查看/编辑器的对话框界面:
![31754762134fc10bd23b8bac21ec00b0.gif](https://img-blog.csdnimg.cn/img_convert/31754762134fc10bd23b8bac21ec00b0.gif)