实现自己的 markdown 编辑器 —— 代码区高亮

887 阅读 0 评论 586 点赞

我是靠谱客的博主开朗过客，这篇文章主要介绍实现自己的 markdown 编辑器 —— 代码区高亮，现在分享给大家，希望可以做个参考。

默认的 markdown 代码区是没有高亮的，例子如下：

11341969-4fc319798c33cce5[1].png

图片

为了能让代码高亮，我们需要用另一个代码高亮的库：highlightjs
官网地址： https://highlightjs.org

使用方法如下：

复制代码

1
2
3
4
<!-- 选择一个配色方案，这里用的是 solarized-dark. 更多配色方案可以在下载的完整代码包里找到 -->
<link rel="stylesheet" href="/static/highlight/styles/solarized-dark.css">
<script src="/static/highlight/highlight.pack.js">
</script><script>hljs.initHighlightingOnLoad();</script>

上面的用法在浏览模式时没有问题，但是在编辑模式下，编辑区变化后，预览区又失去了高亮的效果。
需要额外处理一下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
$('#mdeditor').on('input', function()
{
   var to_html = converter.makeHtml($(this).val());
   $('#preview').html(to_html);

   //注意这里，每次更新预览区时，再高亮处理一下
   $('pre code').each(function(i, block)
   {
      hljs.highlightBlock(block);
   });
});