Highlightjs是一款優秀的代碼高亮Js組件，可以很方便地對各種語言編寫的代碼添加語法高亮樣式。
然而，Highlightjs默認是不包括顯示代碼行號（Line Number）這一特性的，不過可以通過簡單的JS代碼和CSS樣式表實現對Highlightjs的行號顯示功能。
參考博文鏈接： syntax-highlighting-with-highlightjs
Javascript代碼：
//numbering for pre>code blocks$(function(){ $('pre code').each(function(){ var lines = $(this).text().split('/n').length - 1; var $numbering = $('<ul/>').addClass('pre-numbering'); $(this) .addClass('has-numbering') .parent() .append($numbering); for(i=1;i<=lines;i++){ $numbering.append($('<li/>').text(i)); } });});實際上很簡單，首先找到代碼塊$('pre code')。然后取得內容并按照換行符split，我們可以得到代碼塊的行數。最后，我們構建一個包含從數字1到行數n的行號列表，然后把這個列表追加到</pre>和</code>的閉合標簽之間。
此外通過添加適當的css樣式將行號列表渲染到代碼的左手邊緣。使用時請結合頁面樣式對下面的css做出相應修改。
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;}通過上面的js代碼和css樣式表，即可完成簡單易用的Highlightjs行號顯示。
總結
以上所述是小編給大家介紹的JS庫 Highlightjs 添加代碼行號的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
