美文网首页
实现自己的 markdown 编辑器 —— 代码区高亮

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

作者: 冬瓜1992 | 来源:发表于2018-03-31 19:30 被阅读0次

    默认的 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);
        });
    });
    

    相关文章

      网友评论

          本文标题:实现自己的 markdown 编辑器 —— 代码区高亮

          本文链接:https://www.haomeiwen.com/subject/sftjcftx.html