第一次想將一些含有程式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的部落格
創作者介紹
創作者 今宵月は何処を照らすの 的頭像
冰緒雪夜

今宵月は何処を照らすの

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