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

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 添加代码行号的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig

  • JS库之Highlight.js的用法详解

    JS库之Highlight.js的用法详解

    官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

  • js使用highlight.js高亮你的代码

    js使用highlight.js高亮你的代码

    在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉. 开始了正式的捣鼓. 在捣鼓之前去别的网站看了看.这里贴上简书的效果: 其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去.于是去看了看document,发现是这样的: <pre class="hljs javascript">

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

    Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式. 然而,Highlightjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现对Highlightjs的行号显示功能. 参考博文链接: syntax-highlighting-with-highlightjs Javascript代码: //numbering for pre>code blocks $(function(){ $('pr

  • shell 命令统计代码行数的简单代码

    分享一个统计代码行的shell命令: find . "(" -name ".java" -or -name ".html" -or -name ".js" -or -name ".css" ")" -print | xargs wc -l 根据不同的项目类型,不同的目录,自行修改. 如果内容多,可以: find . "(" -name ".java"

  • PHP统计代码行数的小代码

    本文实例为大家分享了PHP统计代码行数的具体代码,供大家参考,具体内容如下 想统计一下项目中一共有多少行代码,结果没找到什么好的工具,就自己写了一个. 效率不怎么样. <?php /** * Created by PhpStorm. * User: luyanfeng * Date: 16/7/12 * Time: 下午1:45 */ /** * @param $dir * @return int */ function countLine($dir) { $count = 0; if (is_

  • JS 排序输出实现table行号自增前端动态生成的tr

    最近做一项目,需要对数据进行排序输出,要求有行号,依次递增1.2.3.4.5........ 前端通过<c:forEach> 遍历动态输出的<tr>,代码如下: <!-- 循环生成,列表数据 --> <c:forEach items="${pager.list}" var="auction"> <tr class="bg1"> <td width="10" al

  • DataGridView控件显示行号的正确代码及分析

    前些天在写个小程序,用到DataGridView,想给它动态的显示行号.不是很费劲GOOGLE了一下,这GOOGLE不要紧,发现了不少问题.以下基本上都是GOOGLE搜索出来的网上的一些解决方法,千篇一律都是这样的: 复制代码 代码如下: private void DataGridView1_RowsAdded(object sender, DataGridViewRowsAddedEventArgs e)         { for (int i = 0; i < e.RowCount; i+

  • Js获取table当前tr行的值的代码

    下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==

  • js为数字添加逗号并格式化数字的代码

    复制代码 代码如下: function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } //数字格式化就可以变成 var num

  • MyEclipse删除网上复制下来的来代码带有的行号(正则去除行号)

    MyEclipse删除网上复制下来的来代码带有的行号(正则去除行号)

    一.正则表达式去除代码行号 作为开发人员,我们经常从网上复制一些代码,有些时候复制的代码前面是带有行号,如: MyEclipse本身自带有查找替换功能,并且支持正则表达式替换,使用正则替换就可以很容易去除这些行号 使用快捷键"ctrl+F"打开MyEclipse的查找替换功能,如下图所示: 这样就可以把代码中的行号全部去掉 去除代码行号的正则表达式:^\s*\d+\. 在为大家分享一个,例如网上复制下来的代码如下: 1<HTML> 2 3<HEAD> 4 5&l

  • MyEclipse去除网上复制下来的代码带有的行号(正则去除行号)

    MyEclipse去除网上复制下来的代码带有的行号(正则去除行号)

    一.正则表达式去除代码行号 作为开发人员,我们经常从网上复制一些代码,有些时候复制的代码前面是带有行号,如: MyEclipse本身自带有查找替换功能,并且支持正则表达式替换,使用正则替换就可以很容易去除这些行号 使用快捷键"ctrl+F"打开MyEclipse的查找替换功能,如下图所示: 这样就可以把代码中的行号全部去掉 去除代码行号的正则表达式:^\s*\d+\. 总结 以上所述是小编给大家介绍的MyEclipse去除网上复制下来的代码带有的行号(正则去除行号),希望对大家有所帮助

  • 在.NET中取得代码行数的方法

    文章目的 介绍在.NET中取得代码行数的方法 代码 复制代码 代码如下: [STAThread] static void Main(string[] args) { ReportError("Yay!"); } static private void ReportError(string Message) { StackFrame CallStack = new StackFrame(1, true); Console.Write("Error: " + Messa

随机推荐