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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php单例模式实现方法分析
2015/03/14 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
js 替换
2008/02/19 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
js实现聊天对话框
2020/02/08 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
200 行python 代码实现 2048 游戏
2018/01/12 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python pip使用超时问题解决方案
2020/08/03 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
自荐信需注意事项
2014/01/25 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
七年级话题作文之执着
2019/11/19 职场文书