JS库 Highlightjs 添加代码行号的实现代码


Posted in Javascript onSeptember 13, 2017

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。

然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能。

参考博文链接: syntax-highlighting-with-highlightjs

Javascript代码:

//numbering for pre>code blocks
$(function(){
  $('pre code').each(function(){
    var lines = $(this).text().split('\n').length - 1;
    var $numbering = $('<ul/>').addClass('pre-numbering');
    $(this)
      .addClass('has-numbering')
      .parent()
      .append($numbering);
    for(i=1;i<=lines;i++){
      $numbering.append($('<li/>').text(i));
    }
  });
});

实际上很简单,首先找到代码块$('pre code')。然后取得内容并按照换行符split,我们可以得到代码块的行数。最后,我们构建一个包含从数字1到行数n的行号列表,然后把这个列表追加到</pre>和</code>的闭合标签之间。

此外通过添加适当的css样式将行号列表渲染到代码的左手边缘。使用时请结合页面样式对下面的css做出相应修改。

pre {
  position: relative;
  margin-bottom: 24px;
  border-radius: 3px;
  border: 1px solid #C3CCD0;
  background: #FFF;
  overflow: hidden;
}
code {
 display: block;
 padding: 12px 24px;
 overflow-y: auto;
 font-weight: 300;
 font-family: Menlo, monospace;
 font-size: 0.8em;
}
code.has-numbering {
  margin-left: 21px;
}
.pre-numbering {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  padding: 12px 2px 12px 0;
  border-right: 1px solid #C3CCD0;
  border-radius: 3px 0 0 3px;
  background-color: #EEE;
  text-align: right;
  font-family: Menlo, monospace;
  font-size: 0.8em;
  color: #AAA;
}

通过上面的js代码和css样式表,即可完成简单易用的Highlightjs行号显示。

总结

以上所述是小编给大家介绍的JS库 Highlightjs 添加代码行号的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
详解动画插件wow.js的使用方法
Sep 13 #Javascript
JS库之Highlight.js的用法详解
Sep 13 #Javascript
详解wow.js中各种特效对应的类名
Sep 13 #Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 #Javascript
JS库之Waypoints的用法详解
Sep 13 #Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 #Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
python海龟绘图实例教程
2014/07/24 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python常用函数详解
2016/09/13 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
对Python中plt的画图函数详解
2018/11/07 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
什么是URL
2015/12/13 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
音乐专业自荐信
2014/02/07 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android