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

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


实现自己的 markdown 编辑器 —— 代码区高亮_第1张图片
图片

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

使用方法如下:





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

$('#mdeditor').on('input', function() {
    var to_html = converter.makeHtml($(this).val());
    $('#preview').html(to_html);
    
    //注意这里,每次更新预览区时,再高亮处理一下
    $('pre code').each(function(i, block){
        hljs.highlightBlock(block);
    });
});

你可能感兴趣的