highlight.js如何显示行号,增加行号显示

2023-07-31   阅读:1308   分类:前端    标签: Highlight

在网页开发过程中,经常会用到代码的展示,而不同颜色的代码,而用highlight.js可以给他加上行号,可以让页面看起来更直观,也更美观。

1、复制以下代码,新建文件,存为highlightjs-line-numbers.js

// 富文本highlightjs-line-numbers.js显示行号
(function (w, d) {
  w.hljsln = {
    initLineNumbersOnLoad: initLineNumbersOnLoad,
    addLineNumbersForCode: addLineNumbersForCode
  };

  function initLineNumbersOnLoad() {
    if (d.readyState === 'interactive' || d.readyState === 'complete') {
      documentReady();
    } else {
      w.addEventListener('DOMContentLoaded', function () {
        documentReady();
      });
    }
  }

  function addLineNumbersForCode(html) {
    var num = 1;
    html = '<span class="ln-num" data-num="' + num + '"></span>' + html;
    html = html.replace(/\r\n|\r|\n/g, function (a) {

       num++;
      return a + '<span class="ln-num" data-num="' + num + '"></span>';
       
    });
    html = '<span class="ln-bg"></span>' + html;
    return html;
  }

  function documentReady() {
    var elements = d.querySelectorAll('pre code');
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].className.indexOf('hljsln') == -1) {
        var html = elements[i].innerHTML;
        
         html = addLineNumbersForCode(html);
         
        elements[i].innerHTML = html;
        elements[i].className += ' hljsln';
      }
    }
  }
}(window, document));

2、引入文件

<script src="highlightjs-line-numbers.js"></script>

3、实例化使用

// 富文本行号实例化
hljsln.initLineNumbersOnLoad();
【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/1002.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×