原创

Markdown实现代码区高亮


markdown默认的代码区是没有高亮样式的,为了能让代码更显眼,我们可以引入一个代码高亮样式的库:highlightjs

官网地址:https://highlightjs.org

下载:

进入官网点击Get version

download1

下载Custom package定制包:

download2

使用:

下载完成后,把文件夹放在项目目录下,引入js和自己喜欢的css,然后执行指定函数,就可以使用了:

<!-- 引入js和styles文件夹下任意一个css,更多配色方案可以自己选择-->
<link rel="stylesheet" href="/static/highlight/styles/qtcreator_light.css">
<script src="/static/highlight/highlight.pack.js"></script>
<!-- 执行函数 -->
<script>hljs.initHighlightingOnLoad();</script>

补充:

有时编辑时会发生预览区失去高亮的情况,此时可以用js处理一下:

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

代码增加行号:

<!--代码区添加行号-->
<script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
正文到此结束