第一次想將一些含有程式Code的文章放在網路的筆記上
這時候就想要有標明清楚的程式碼區段…參考了各個BLOG的站主們的文章
發現配合Google的Google Code Prettify再加上一些CSS的做法就可以了

但因為不熟悉這些部份…所以也翻找了很多網站,大多的做法都是用在Blogger的
而我使用的PIXNET就不完全是這種做法…

首先是在PIXNET的管理後台→側邊欄位設定→頁尾描述→設定
貼上:<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
若要使用官方的樣式的話,則為:<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst&lang=js"></script>
其中skin=sunburst中的sunburst是該樣式的名稱,詳見官方SKIN

*參考自格物致知

再來就是CSS的設定,其內文我還不是很懂,都是藉由各BLOG的大大所提供的Code去拼湊出來的…
至PIXNET的管理後台→自訂樣式→CSS原始碼編輯→在『最下方』貼上Code

pre.code {
display: block;
font-family: Courier New;
font-size: 10pt;
overflow: auto;
min-height: 30px;
max-height:800px;
padding: 0px 0px 0px 21px;
border: 1px solid #ccc;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
}
code.prettyprint {
line-height: 1.2em;
margin: 1px;
}

再來將要標記為程式碼的區段加上標籤即可
前方:<pre class="code"><code class="prettyprint linenums">
後方:</code></pre>

而linenums其實應該是顯示行數的功能,但不曉得為何我的還顯示不出來…需要再試試~”~

參考資料:
1. 格物致知
2. 符碼記憶
3. 上述提供- Html Encode 工具
4. COOKYS’BLOG
5. mud2的部落格
創作者介紹

今宵月は何処を照らすの

冰緒雪夜 發表在 痞客邦 PIXNET 留言(0) 人氣()