如何使用Highlight.js在HTML代碼中顯示行號？

在網頁中展示代碼并添加行號，能顯著提升代碼的可讀性和調試效率。highlight.JS是一個優秀的代碼高亮庫，但它本身不具備行號顯示功能。本文將指導您如何結合highlight.js、自定義css和JavaScript代碼，輕松實現html代碼的行號顯示。

開發者經常遇到的問題是：使用Highlight.js高亮HTML代碼后，無法自動添加行號。這是因為Highlight.js需要手動添加行號功能。

解決方案是利用JavaScript動態生成行號，并將其插入代碼塊中。具體步驟如下：

首先，確保已正確引入Highlight.js的css和JavaScript文件。 核心在于添加自定義CSS樣式和JavaScript代碼來生成和顯示行號。

自定義CSS樣式用于控制代碼塊和行號的樣式，包括位置、顏色、字體等，確保行號與代碼整齊美觀地排列。例如，pre元素使用相對定位，pre-numbering元素則絕對定位于代碼塊左側；code.has-numbering類調整代碼塊的左內邊距，為行號預留空間。

立即學習“前端免費學習筆記（深入）”；

JavaScript代碼的核心邏輯是遍歷代碼塊的每一行，動態生成元素作為行號，并將其添加到一個容器元素中。該容器使用pre-numbering類進行樣式控制，并作為代碼塊的兄弟元素插入dom樹。使用jquery庫可以簡化DOM操作。 修改后的代碼包含必要的CSS和JavaScript，并使用$(function () { … });確保代碼在DOM加載完成后執行，從而保證行號能正確添加到已渲染的代碼塊中。 這段JavaScript代碼遍歷每個

標簽下的標簽，計算代碼行數，并動態創建一個包含行號的

元素。請注意，此方法依賴于jQuery庫，請確保已正確引入。

通過以上步驟，即可為Highlight.js高亮的代碼添加行號，顯著提升代碼的可讀性。