更新 EditorMD
现在博客用的编辑器是我在 最开始 就找到的编辑器插件 EditorMD。后来,因为我想要高亮代码又去找到 另一个插件。
但是这样的组合带来一个问题,一直没有解决,那就是在编辑过程中的预览页面上,代码不会高亮。必须要发布之后才能看到正确的显示效果。
我突然想到,既然都是开源代码,何不我自己去改一改代码解决这些问题呢。
说着,我就去 GitHub
上 Fork
了 EditorMD 和它基于的 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
语法居然不对。不知道为什么之前那样也能正常显示。