Highlight.js文法反白

標籤：data   gpg   搜尋   padding   ott   ios   wfq   結束   edit   

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

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

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

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

Highlight.js在剛剛（約20分鐘）的硬核Google之後，我發現了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/

小文註：

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

?

Highlight.js文法反白