讓程式碼顯示特別的顏色

最近在苦思如何將版面改的有特色,所以參考許多有內容的Blog,剛好看到一篇Ressol的Code Pretty 讓部落格也能顯示語法顯目提示,其實以前就想讓加入註解的特別顯示,不過不想用別人的圖示,所以一直拖到現在還沒弄出自己的來(之前裝了某GIF軟體讓我無法開機),在沒弄出漂亮底圖前我就先把Code Pretty加入吧

步驟如下

點這下載Code Pretty的Source Code(壓縮檔)
解壓縮後有產生兩個檔案prettify.js和prettify.css,把它們上傳到自己的網頁空間(我是放在Google Page上)
進入控制主頁,點選範本->修改HTML,找到</head>這個字眼,並在上面加入<link href='http://kevintsai1202.googlepages.com/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://kevintsai1202.googlepages.com/prettify.js' type='text/javascript'/>
最後找到<body>,並改為<body onload='prettyPrint()'>

改完以後記得儲存喔

以後發佈文章時只要在程式碼前後加上 <code class='prettyprint'> </code>,程式碼的關鍵字就會像上面的HTML語法一樣變成彩色了

第四步也可以加入一個HTML/JavaScript的Widget,然後內容輸入
<script>prettyPrint();</script>
這樣在Blog開啟後需要執行多個script會比較彈性

單行道

本站文章分類

所有文章

讓程式碼顯示特別的顏色

0 回應: