代码高亮 highlight.js
本站代码高亮的插件来自highlight.js。在本页就有实例。使用方法非常简单,推荐以下的做法:
1、在下载页面 https://highlightjs.org/download/ 勾选你想要高亮的语言,然后下载js文件,并放到自己的网站。如果只要使用几种基本的语言,可以直接引用官网给的cdn链接。
2、在demo页面 https://highlightjs.org/static/demo/ 选择喜欢的高亮风格,并下载对应的css文件放到自己的网站,或者引用链接。
3、在页面添加以下html代码启用高亮。
4、这时页面上插入的代码应该已经自动高亮了。如果需要指定使用的高亮类型,只需要在“`后面加上代码类。例如:
// markdown语法
“`js
// 这里插入js代码
官方使用说明:https://highlightjs.org/usage/
推荐看看官方的API说明:http://highlightjs.readthedocs.io/en/latest/api.html
## 显示行号 line-numbers
查阅官方的API得知highlight不提供显示行号的功能,需要自己添加。下面分享本站添加行号的方法。添加以下js和css代码:
js:
“`js line-numbers
$(function() {
$(‘pre code’).each(function() {
var lines = $(this