html代码高亮带行号,网页代码高亮并显示行号

  • Post author:
  • Post category:其他


代码高亮 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