最近在苦思如何將版面改的有特色,所以參考許多有內容的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 回應:
張貼留言