手机客户端
首页　>　文章列表　>　如何用JavaScript优雅地在网页中为代码添加行号？

如何用JavaScript优雅地在网页中为代码添加行号？

472 2025-03-25

如何用JavaScript优雅地在网页中为代码添加行号？

网页代码行号的优雅解决方案

在网页中展示代码时，清晰的行号能显著提升可读性和调试效率。本文介绍一种简洁高效的JavaScript方法，轻松为代码添加行号，无需繁琐的HTML和CSS操作。

一些传统方法，例如使用

</code>标签或<code><code></code>标签添加行号，存在问题：<code><xmp></code>标签已废弃，而<code><code></code>标签需要进行HTML实体转义，操作复杂且易出错。</p> <p>因此，我们推荐使用JavaScript实现。以下方案简洁高效：</p> <pre><div id="code" style="font-size:12px;"></div> <style> * {margin: 0; padding: 0;} #code p::before {content: attr(data-line-number); min-width: 50px; text-align: right; display: inline-block; padding: 0 5px; color: #ccc;} </style> <script> var $code = document.getElementById('code'); `// 代码字符串 `.split('n').forEach((text, index) =&gt; { var $line = document.createElement('p'); $line.dataset.lineNumber = index + 1; $line.innerText = text; $code.appendChild($line); }); </script></pre> <p>代码首先创建<code>div</code>容器，并设置字体大小。CSS样式定义了行号的显示方式，包括宽度、对齐、内边距和颜色。JavaScript代码将代码字符串按行分割，为每一行创建<code><p></code>元素，使用<code>dataset</code>属性存储行号，最后将这些<code><p></code>元素添加到容器中。 这种方法避免了HTML实体转义，结构清晰，易于理解和维护。 利用<code>dataset</code>属性和<code>::before</code>伪元素，代码结构简洁，便于扩展和修改。</p> <div style="float: right;overflow: hidden;height: 20px;line-height: 16px;font-size: 14px;color:gray;"> 来源：<a href="1741374232" class="aBlack" title="1741374232" target="_blank" rel="nofollow">1741374232</a> </div> </div> <div class="ngfSypBox"> <a href="https://www.jiaoben.net/article/313173.html" class="aBlue" title="">上一篇　Node.js 应用中Elastic APM全链路追踪失败，如何解决Kibana缺失SQL及HTTP耗时细节问题？</a> <a href="https://www.jiaoben.net/article/313190.html" class="aBlue" title="">下一篇　Python数据分析中如何使用iplot函数绘制交互式图表？</a> <div class="clear"></div> </div> </div> </div> <div class="ngfXlhBox"> <div class="ngfTjzxIn"> <div class="ngfTjzxTitle"> <b></b> <h2>本类最新</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="查看更多" target="_blank" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfSpjcList"> <li> <a href="https://www.jiaoben.net/article/237645.html" class="aBlack" target="_blank" title="为什么 CSS 样式下两张图片不显示，left 样式没有宽度，虽然父元素有宽度，但只有 30% 子元素有宽度？"> <span><img data-src="/uploads/20250327/174309059667e573a44d042.jpg" alt="为什么 CSS 样式下两张图片不显示，left 样式没有宽度，虽然父元素有宽度，但只有 30% 子元素有宽度？" class="lazyload" src="/uploads/20250327/174309059667e573a44d042.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>为什么 CSS 样式下两张图片不显示，left 样式没有宽度，虽然父元素有宽度，但只有 30% 子元素有宽度？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/302478.html" class="aBlack" target="_blank" title="Vue中如何递归渲染树形数据生成DOM节点？"> <span><img data-src="/uploads/20250327/174309059567e573a3be6d1.jpg" alt="Vue中如何递归渲染树形数据生成DOM节点？" class="lazyload" src="/uploads/20250327/174309059567e573a3be6d1.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>Vue中如何递归渲染树形数据生成DOM节点？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/317446.html" class="aBlack" target="_blank" title="inline-block元素错位原因及解决方案"> <span><img data-src="/uploads/20250327/174308971267e57030984ba.jpg" alt="inline-block元素错位原因及解决方案" class="lazyload" src="/uploads/20250327/174308971267e57030984ba.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>inline-block元素错位原因及解决方案</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/299472.html" class="aBlack" target="_blank" title="Vue组件属性更新不重新渲染？有哪些优雅的解决方法？ "> <span><img data-src="/uploads/20250327/174308943567e56f1b2d0f8.jpg" alt="Vue组件属性更新不重新渲染？有哪些优雅的解决方法？ " class="lazyload" src="/uploads/20250327/174308943567e56f1b2d0f8.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>Vue组件属性更新不重新渲染？有哪些优雅的解决方法？ </p> </a> </li> <li> <a href="https://www.jiaoben.net/article/302904.html" class="aBlack" target="_blank" title="如何验证我的浏览器是否开启了CSS硬件加速？"> <span><img data-src="/uploads/20250327/174308793767e569417341f.jpg" alt="如何验证我的浏览器是否开启了CSS硬件加速？" class="lazyload" src="/uploads/20250327/174308793767e569417341f.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何验证我的浏览器是否开启了CSS硬件加速？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/241641.html" class="aBlack" target="_blank" title="块状元素如何影响父元素高度？"> <span><img data-src="/uploads/20250327/174308760267e567f23eea8.jpg" alt="块状元素如何影响父元素高度？" class="lazyload" src="/uploads/20250327/174308760267e567f23eea8.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>块状元素如何影响父元素高度？</p> </a> </li> <div class="clear"></div> </ul> </div> </div> </div> <div class="ngfRight"> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门推荐</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" target="_blank" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfJxydList"> <li> <span><a href="https://www.jiaoben.net/article/307264.html" target="_blank" title="CSS圆角边框与内容出现缝隙：如何彻底解决？"><img data-src="/uploads/20250322/174262680267de5ff229514.jpg" alt="CSS圆角边框与内容出现缝隙：如何彻底解决？" class="lazyload" src="/uploads/20250322/174262680267de5ff229514.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/307264.html" target="_blank" title="CSS圆角边框与内容出现缝隙：如何彻底解决？" class="aBlack">CSS圆角边框与内容出现缝隙：如何彻底解决？</a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-22</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/253268.html" target="_blank" title="通过构建一些很酷的项目来学习 Tailwind CSS"><img data-src="/uploads/20250317/174217860167d78929399cb.jpg" alt="通过构建一些很酷的项目来学习 Tailwind CSS" class="lazyload" src="/uploads/20250317/174217860167d78929399cb.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/253268.html" target="_blank" title="通过构建一些很酷的项目来学习 Tailwind CSS" class="aBlack">通过构建一些很酷的项目来学习 Tailwind CSS</a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-17</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/251314.html" target="_blank" title="如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？"><img data-src="/uploads/20250311/174167070367cfc92fa6292.jpg" alt="如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？" class="lazyload" src="/uploads/20250311/174167070367cfc92fa6292.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/251314.html" target="_blank" title="如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？" class="aBlack">如何使用 Flex 或 Grid 布局将四个元素排列成自适应宽度和上下两行？</a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-11</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/299975.html" target="_blank" title="移动端文本过长如何实现自动轮播，长度较短时则不滚动？ "><img data-src="/uploads/20250320/174244350767db93f3efd49.jpg" alt="移动端文本过长如何实现自动轮播，长度较短时则不滚动？ " class="lazyload" src="/uploads/20250320/174244350767db93f3efd49.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/299975.html" target="_blank" title="移动端文本过长如何实现自动轮播，长度较短时则不滚动？ " class="aBlack">移动端文本过长如何实现自动轮播，长度较短时则不滚动？ </a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-20</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/302803.html" target="_blank" title="小程序开发：如何用列表循环高效处理不同状态的子项？ "><img data-src="/uploads/20250310/174161099267cedff040853.jpg" alt="小程序开发：如何用列表循环高效处理不同状态的子项？ " class="lazyload" src="/uploads/20250310/174161099267cedff040853.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/302803.html" target="_blank" title="小程序开发：如何用列表循环高效处理不同状态的子项？ " class="aBlack">小程序开发：如何用列表循环高效处理不同状态的子项？ </a></dt> <dd> <em><b class="icon1"></b>501</em> <em><b class="icon2"></b>2025-03-10</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/298514.html" target="_blank" title="大数据量滚动表格卡顿怎么办？虚拟列表优化方案及资源推荐"><img data-src="/uploads/20250327/174303816867e4a6d8eee3d.jpg" alt="大数据量滚动表格卡顿怎么办？虚拟列表优化方案及资源推荐" class="lazyload" src="/uploads/20250327/174303816867e4a6d8eee3d.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/298514.html" target="_blank" title="大数据量滚动表格卡顿怎么办？虚拟列表优化方案及资源推荐" class="aBlack">大数据量滚动表格卡顿怎么办？虚拟列表优化方案及资源推荐</a></dt> <dd> <em><b class="icon1"></b>500</em> <em><b class="icon2"></b>2025-03-27</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> </ul> </div> </div> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门教程</h2> <span> <a href="https://www.jiaoben.net/articlelist" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfRmspList"> <li> <a href="https://www.jiaoben.net/article/274449.html" title="微信视频号怎么私信给对方？私信给对方他能看到吗？" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250318/174225929767d8c4610da52.jpg" alt="微信视频号怎么私信给对方？私信给对方他能看到吗？" class="lazyload" src="/uploads/20250318/174225929767d8c4610da52.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>微信视频号怎么私信给对方？私信给对方他能看到吗？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/175629.html" title="PHP框架如何使用 PHPStorm" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250326/174297902767e3bfd39c160.jpg" alt="PHP框架如何使用 PHPStorm" class="lazyload" src="/uploads/20250326/174297902767e3bfd39c160.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>PHP框架如何使用 PHPStorm</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/244758.html" title="SQL 联表查询中如何去除重复字段？" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250322/174263070067de6f2cb886e.jpg" alt="SQL 联表查询中如何去除重复字段？" class="lazyload" src="/uploads/20250322/174263070067de6f2cb886e.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>SQL 联表查询中如何去除重复字段？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/296216.html" title="WallpaperEngine官网网址一览" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250313/174185823167d2a5b72c74c.png" alt="WallpaperEngine官网网址一览" class="lazyload" src="/uploads/20250313/174185823167d2a5b72c74c.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>WallpaperEngine官网网址一览</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/305936.html" title="GORM关联模型字段：指针类型和值类型在预加载时的区别是什么？" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250322/174265350867dec84401ad2.jpg" alt="GORM关联模型字段：指针类型和值类型在预加载时的区别是什么？" class="lazyload" src="/uploads/20250322/174265350867dec84401ad2.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>GORM关联模型字段：指针类型和值类型在预加载时的区别是什么？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/270628.html" title="苹果笔记本电脑适合什么人用" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250316/174213840367d6ec233febc.jpg" alt="苹果笔记本电脑适合什么人用" class="lazyload" src="/uploads/20250316/174213840367d6ec233febc.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>苹果笔记本电脑适合什么人用</p> </a> </li> <div class="clear"></div> </ul> </div> </div> <!--热门应用 end--> </div> <!--右边 end--> <div class="clear"></div> </div> <div class="sy_footer"> <footer> <div class="footer_cont"> <div class="footcont_left"> <a href="#"> <img style="width: 300px;" src="https://www.jiaoben.net/statics/www/2020images/footer-logo.png" alt=""> </a> </div> <em class="fot_line"></em> <div class="footcont_right"> <p>版权所有：jiaoben.net Copyright 2020~2025</p> <p>本站所有软件、源码、文章均有网友提供，如有侵权联系jiaobennet@163.com</p> <p><a style="color: #999999" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2022002427号</a></p> </div> <div class="clear"></div> </div> </footer> </div> <!--右侧导航--> <div class="ngfYoucBox" id="menuRight"> <a href="https://m.jiaoben.net" class="aBlue"> <b class="icon1" style="float: none;"></b> <p>手机版</p> </a> <a href="javascript:scroll(0,0)" class="cBlack"> <b class="icon2"></b> <p>返回顶部</p> </a> </div> <!--右侧导航 end--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d7dfe7acaf9cb2eaf7c319afb7d1c287"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <div class="ngfZuocBox" id="menuLeft"> <a href="https://www.jiaoben.net/articlelist/31_1.html" title="软件教程">软件教程</a> <a href="https://www.jiaoben.net/articlelist/30_1.html" title="数据库">数据库</a> <a href="https://www.jiaoben.net/articlelist/29_1.html" title="linux">linux</a> <a href="https://www.jiaoben.net/articlelist/28_1.html" title="网络安全">网络安全</a> <a href="https://www.jiaoben.net/articlelist/25_1.html" title="MySql">MySql</a> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="HTML+CSS">HTML+CSS</a> <a href="https://www.jiaoben.net/articlelist/20_1.html" title="JavaScript">JavaScript</a> <a href="https://www.jiaoben.net/articlelist/19_1.html" title="C++">C++</a> <a href="https://www.jiaoben.net/articlelist/18_1.html" title="goLang">goLang</a> <a href="https://www.jiaoben.net/articlelist/17_1.html" title="php">php</a> <a href="https://www.jiaoben.net/articlelist/16_1.html" title="Python">Python</a> <a href="https://www.jiaoben.net/articlelist/15_1.html" title="java">java</a> </div> </body> </html>