糕飛.想點三十而立.努力發奮

2012年8月14日 星期二

Another syntax highlight - highlight.js

+ 暫沒回應
此 blog 的 syntax highlight一向是用 SyntaxHighlighter。昨天在網上閒逛時發現 highlight.js,比起現在用的更方便易用,外觀更靚更漂亮,還沒有那惱人的「?」圖示,於是立即轉用!

如要設定,只需將以下的 code 複製進 <head>> 內便可

CSS:
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.0/styles/default.min.css">

Javascript:
<script src="http://yandex.st/highlightjs/7.0/highlight.min.js"></script>
<script type="'text/javascript'">
hljs.initHighlightingOnLoad();
</script> 

要用 code 時便可以用 <pre><code> 將程式碼包著,如:
<pre><code>
//程式碼
function hello_world(){
    alert("HELLO")
}
</code></pre>

便會自動轉變為
 //程式碼 
function hello_world(){ 
   alert("HELLO") 
}


highlight.js 會嘗試自動找出程式碼是屬於什麼語言,不過亦可在 <code> 中加上 class="" 來指定語言。

指定 java:

<pre><code class="java">
public void main(String[] args){
   //......
}
</code></pre>
便會有 java 的 highlight
public void main(String[] args){
//......
}

另外,只要將 highlight.js 提供 26 種不同的 style 讓你選,只要將 css file 換掉便行,非常方便!