Markdown实现代码区高亮
markdown
默认的代码区是没有高亮样式的,为了能让代码更显眼,我们可以引入一个代码高亮样式的库:highlightjs
官网地址:https://highlightjs.org
下载:
进入官网点击Get version
:
下载Custom package
定制包:
使用:
下载完成后,把文件夹放在项目目录下,引入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>
正文到此结束