Highlight.js語法突出顯示

正如我在這個博客開始之前所說的最小可行產品，因此我在幾個小時內就開始運行了。這種方法在初始推動之后會減慢你的速度。最新的例子是要提供語法高亮的代碼片段。

規格由於使用靜態網站生成器，我的狩獵的開始立即產生了一些障礙。首先，我認為不用說，服務器端編程是一個很明顯的總不停。第二，像課程或ids這樣的具體標記將會非常棘手，因為使用markdown來創建我的文章。

Gripes當看到我真正臭名昭着的是，它的血腥難以找到一個簡單的解決方案！這些產品通常是非常全面的，而且在個人看來，超過我將花更多的時間來修剪脂肪，而不是從頭開始編碼。說如果我的需要是一個完整的花式褲子，那么你不能錯過其中的一些。

SyntaxHighlighter的
GeSHi - 通用語法熒光筆
Google Code Prettify
Lighter.js（用MooTools編寫）
如果你知道任何一個真的應該提到讓我知道。

Highlight.js在剛剛（約20分鍾）的硬核谷歌之后，我發現了highlight.js。這個圖書館會高興地瀏覽頁面，尋找任何pre>code頁面元素，並且在應用相關的格式之前，不用擔心會嘗試檢測編程語言（可以處理它的是54！）。更好的是，着色和突出顯示完全是css驅動的，它們共有26個主要功能，包括與Google Code，Github和XCode的風格相匹配的選擇。將腳本初始化為一個班輪。

hljs.initHighlightingOnLoad();
行號這個圖書館的一個遺漏是行編號，盡管這是一個貢獻者努力添加它們所發現的事情。我喜歡行號，也許只是眼睛糖果，但我可以看到一天，我想要你們指向第33行，沒有’em’填充。那么我該怎么做，但是要快速點擊jQuery來做我的出價。下面顯示的行號使用非常的腳本（如何非常元！）是我的快速的n代碼來完成工作。

//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’)。然后，通過將內容分成新行，\n我們可以得到總行數。最后，我們通過建立與列表項的列表contianing號1 lines和結束標記之間添加它和。用適當的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; }

工作很好！毫無疑問，需要改進，這些東西有不斷發展的習慣！如果這對您有任何用處或您有任何建議，請在下面的評論中通知我。

http://idodev.co.uk/2013/03/syntax-highlighting-with-highlightjs/

小文注：

可能根據每個人使用的高度風格上面的樣式可能需要調整。

​