现在博客用的编辑器是我在 最开始 就找到的编辑器插件 EditorMD。后来,因为我想要高亮代码又去找到 另一个插件

但是这样的组合带来一个问题,一直没有解决,那就是在编辑过程中的预览页面上,代码不会高亮。必须要发布之后才能看到正确的显示效果。

我突然想到,既然都是开源代码,何不我自己去改一改代码解决这些问题呢。

说着,我就去 GitHubForkEditorMD 和它基于的 editor.md。准备先从 editor.md 上下手。

editor.md

我首先更新了 KaTeX 的版本,这个很简单,直接修改 CDN 的地址就好。

接着我将 marked 版本更新到最新 0.7.0 版。直接将新文件替换进去就行。

接着我就开始解决代码高亮问题,通过阅读文档,我发现编辑器自带了 prettify 用来代码高亮,这为我指明了方向。

通过搜索 prettify,我找到了调用高亮代码的语句,并把它替换为了 initHighlighting()

根据 highlight.js 的 文档,只要调用这个方法就能高亮所有代码。

initHighlighting()
Applies highlighting to all \<pre\>\<code\>..\</code\>\</pre\> blocks on a page.

但是在运行的过程中,我发现,每次都只会在第一次启动时高亮代码,一旦我在编辑器中输入文字,预览界面一刷新,高亮就消失了。

最开始我以为,重新刷新的时候没有调用,initHighlighting() 这个方法。但是通过一些基本的调试技巧,推翻了我的这个猜测。最后我只能通过熟练的搜索技巧,发现了 解决方法

你需要先把一个 flag 设置成 false 之后重新调用才能生效。

hljs.initHighlighting.called = false;
hljs.initHighlighting();

问题解决,现在一切工作正常。

EditorMD

但是要让插件正常工作,还需要对插件进行一点点的调整。

除了替换上一步生成的文件,还需要将 highlight.js 的脚本和样式表添加到页面上。简单的添加之后,插件工作正常。

不过因为升级 marked 解析脚本,我才发现,我爸之前文章的 markdown 语法居然不对。不知道为什么之前那样也能正常显示。

标签: 编辑器, 高亮, 代码