默认的 markdown 代码区是没有高亮的,例子如下:
图片
为了能让代码高亮,我们需要用另一个代码高亮的库:highlightjs
官网地址: https://highlightjs.org
使用方法如下:
<!-- 选择一个配色方案,这里用的是 solarized-dark. 更多配色方案可以在下载的完整代码包里找到 --> <link rel="stylesheet" href="/static/highlight/styles/solarized-dark.css"> <script src="/static/highlight/highlight.pack.js"> </script><script>hljs.initHighlightingOnLoad();</script>
上面的用法在浏览模式时没有问题,但是在编辑模式下,编辑区变化后,预览区又失去了高亮的效果。
需要额外处理一下:
$('#mdeditor').on('input', function() { var to_html = converter.makeHtml($(this).val()); $('#preview').html(to_html); //注意这里,每次更新预览区时,再高亮处理一下 $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); });
发表评论 取消回复