JS庫 Highlightjs 添加代碼行號的實(shí)現(xiàn)代碼
Highlightjs是一款優(yōu)秀的代碼高亮Js組件,可以很方便地對各種語言編寫的代碼添加語法高亮樣式。
然而,Highlightjs默認(rèn)是不包括顯示代碼行號(Line Number)這一特性的,不過可以通過簡單的JS代碼和CSS樣式表實(shí)現(xiàn)對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)); } }); });
實(shí)際上很簡單,首先找到代碼塊$('pre code')。然后取得內(nèi)容并按照換行符split,我們可以得到代碼塊的行數(shù)。最后,我們構(gòu)建一個(gè)包含從數(shù)字1到行數(shù)n的行號列表,然后把這個(gè)列表追加到</pre>和</code>的閉合標(biāo)簽之間。
此外通過添加適當(dāng)?shù)腸ss樣式將行號列表渲染到代碼的左手邊緣。使用時(shí)請結(jié)合頁面樣式對下面的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樣式表,即可完成簡單易用的Highlightjs行號顯示。
總結(jié)
以上所述是小編給大家介紹的JS庫 Highlightjs 添加代碼行號的實(shí)現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Bootstrap每天必學(xué)之折疊(Collapse)插件
Bootstrap每天必學(xué)之折疊(Collapse)插件,折疊插件可以很容易地讓頁面區(qū)域折疊起來,感興趣的小伙伴們可以參考一下2016-04-04JavaScript基礎(chǔ)之文件上傳與下載的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件上傳與下載功能的相關(guān)資料,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下2023-01-01JavaScript讓IE瀏覽器event對象符合W3C DOM標(biāo)準(zhǔn)
IE瀏覽器event對象跟W3C實(shí)現(xiàn)的不一樣.所以自己封裝一個(gè)EventUtil類來讓IE瀏覽器的event對象與W3C一樣.2009-11-11js實(shí)現(xiàn)4個(gè)方向滾動(dòng)的球
本文主要介紹了js實(shí)現(xiàn)4個(gè)方向滾動(dòng)球的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法,作者根據(jù)jQuery中一些對AJAX請求的處理方式來用原生API實(shí)現(xiàn),需要的朋友可以參考下2016-05-05