Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
使用Highlight.js高亮显示代码时，如何为其添加行号？_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

使用Highlight.js高亮显示代码时，如何为其添加行号？

程序猿 • • 用户投稿

使用Highlight.js高亮显示代码时，如何为其添加行号？

highlight.js本身不具备添加行号的功能，需要借助css和javascript实现。本文将详解如何为highlight.js高亮的html代码添加行号，并解释此前未能成功添加的原因。

问题根源在于Highlight.js缺乏内置行号支持，需手动添加。解决方案是通过JavaScript动态生成行号，并用CSS控制其样式和位置。 我们需要创建一个

    元素来容纳行号，然后用JavaScript遍历代码行，为每个

  • 元素添加对应的行号。 同时，CSS样式确保行号与代码块对齐。

    以下是一个改进后的代码示例，包含必要的CSS和JavaScript代码：

        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;    }     hljs.highlightAll();    $(function () {        $('pre code').each(function () {            var lines = $(this).text().split('n').length - 1;            var $numbering = $('
      ').addClass('pre-numbering');            $(this)                .addClass('has-numbering')                .parent()                .append($numbering);            for (i = 1; i <= lines; i++) {                $numbering.append($('
    • ').text(i));            }        });    });
              行号    
      测试页面

    此代码使用了jQuery简化DOM操作，当然也可以用纯JavaScript实现。 它先加载Highlight.js和jQuery，然后遍历代码行数，动态创建行号列表并添加到代码块中。 CSS样式控制行号的样式和位置，最终实现为Highlight.js高亮的代码添加行号。

    以上就是使用Highlight.js高亮显示代码时，如何为其添加行号？的详细内容，更多请关注创想鸟其它相关文章！

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
    发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563905.html

    • 赞 (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    0 0

    关于作者

    程序猿的头像

    程序猿签约作者

    413.8K 文章
    0 评论
    2 粉丝
    这个人很懒，什么都没有留下～
    使用iframe嵌入视频时出现404错误，如何排查解决？
    上一篇 2025年12月22日 08:44:20
    SVG文本如何实现高效复用并动态更新内容？
    下一篇 2025年12月22日 08:44:32

    相关推荐

    发表回复

    登录后才能评论
    关注微信