Highlightjs是一款優(yōu)秀的代碼高亮Js組件，可以很方便地對(duì)各種語(yǔ)言編寫的代碼添加語(yǔ)法高亮樣式。
然而，Highlightjs默認(rèn)是不包括顯示代碼行號(hào)（Line Number）這一特性的，不過可以通過簡(jiǎn)單的JS代碼和CSS樣式表實(shí)現(xiàn)對(duì)Highlightjs的行號(hào)顯示功能。
參考博文鏈接： 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)); } });});實(shí)際上很簡(jiǎn)單，首先找到代碼塊$('pre code')。然后取得內(nèi)容并按照換行符split，我們可以得到代碼塊的行數(shù)。最后，我們構(gòu)建一個(gè)包含從數(shù)字1到行數(shù)n的行號(hào)列表，然后把這個(gè)列表追加到</pre>和</code>的閉合標(biāo)簽之間。
此外通過添加適當(dāng)?shù)腸ss樣式將行號(hào)列表渲染到代碼的左手邊緣。使用時(shí)請(qǐng)結(jié)合頁(yè)面樣式對(duì)下面的css做出相應(yīng)修改。
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樣式表，即可完成簡(jiǎn)單易用的Highlightjs行號(hào)顯示。
總結(jié)
以上所述是小編給大家介紹的JS庫(kù) Highlightjs 添加代碼行號(hào)的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
