撰寫blog文章時,常常會在文章中寫上一些程式碼,可是這些程式碼常會使得整篇文章看起來不是很順眼。

這時候可以使用 SyntaxHighlighter,讓程式碼有美化與強調的效果。

在此我使用pixnet的blog為例:

Step 1: 一開始先到pixnet的管理後台,選擇"側邊欄位設定",再點擊"頁尾描述"中的設定,如下圖所示:

1.JPG   

這時如果我要在pixnet中撰寫 javascript 相關的文章,那就貼上以下這段程式碼:

 





 

注意到這段程式碼(上面第五行程式碼)。




 

如果我想貼別的程式就必須使用別的shBrushxxx.js,對照的js可參考這個連結,裡面有明確寫著哪種語言對到哪些js。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
Step 2:撰寫文章時貼上程式碼。
請點擊 HTML標籤,如下圖所示:
2.JPG  

在此我一樣以Javascript為例,在HTML中加上
<pre name="code" class="brush: js;">
code置放位置
</pre>

    葛瑞斯肯 發表在 痞客邦 留言(0) 人氣()