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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 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
获得Google PR值的PHP代码
2007/01/28 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
帝国cms常用标签汇总
2015/07/06 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
laravel请求参数校验方法
2019/10/10 PHP
Js的MessageBox
2006/12/03 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
python 移除字符串尾部的数字方法
2018/07/17 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
编辑求职信样本
2013/12/16 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
普通话宣传标语
2014/06/26 职场文书
教师节慰问信
2015/02/15 职场文书
矛盾论读书笔记
2015/06/29 职场文书
货款欠条范本
2015/07/03 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS