投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

如何使用 HighlightJS 为 HTML 代码添加行号？

程序猿 • • 好文分享 • 阅读 0

如何使用 HighlightJS 为 HTML 代码添加行号？

如何使用 highlightjs 添加 html 源代码行号

在使用 HighlightJS 突出显示 HTML 源代码时，你提到无法为代码添加行号。这是因为 HighlightJS 默认不会添加行号，你需要手动添加。

官方文档说明

官方文档中关于行号的描述：https://highlightjs.readthedocs.io/en/latest/line-numbers.html

修改后的代码

立即学习“前端免费学习笔记（深入）”；

为了解决你的问题，修改后的代码如下：

            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)); } }); });

    以上就是如何使用 HighlightJS 为 HTML 代码添加行号？的详细内容，更多请关注创想鸟其它相关文章！

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

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

关于作者

程序猿的头像

程序猿签约作者

387.0K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月22日 03:05:11
下一篇 2025年12月22日 03:05:23

相关推荐

发表回复

登录后才能评论
关注微信