自己写了一个博客,使用的是markdown编辑器,但是代码没有高亮,于是乎,找了下代码高亮的方法,原来是使用highlight.js插件实现的。
未高亮的代码:
首先让我们看一下highlight.js 的官方文档示例https://highlightjs.org,里边高亮的样式和语言有很多种,可以根据自己的偏好给代码上色。
具体用法:官方文档highlight用法
用法非常简单:
一、引入 highlight.js 文件
我们需要在页面中同时引入一个 js 文件和一个 css 文件(这里直接使用百度静态资源库提供的 CDN 链接,既简单又提升加载速度,真正的开箱即用),这里使用和segmentfault站一样的代码高亮样式default.min.css
hljs.initHighlightingOnLoad();
二、自定义初始化
如果对高亮还有其他需求,这是可以进行初始化代设置
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
添加高亮后的效果:
所引用的文件:
百度静态资源库http://cdn.code.baidu.com/
关键字:高亮, highlight, 代码, 用法