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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
JavaScript中的Proxy对象
Nov 27 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
php.ini中文版
2006/10/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
python装饰器decorator介绍
2014/11/21 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
电脑销售顾问自荐信
2014/01/29 职场文书
倡议书格式
2014/08/30 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server