鴨爸的隨手寫寫

這個問題花了我將盡好幾個小時的時間慢慢的去問Google大神才問出來的答案

感覺上好像有好多種方式可是我還是比較中意SyntaxHighlighter

還滿方便使用的....一般都是在SyntaxHiglighter的官方下載網頁就可以下載整包的回去然後上傳到指定位置再指定連結

另外可直接下載：http://alexgorbatchev.com/downloads/grab.php?name=sh

再來是加入位置 (我是參考威力手記本存方的) ：(痞客邦)pixnet的管理後台 → 部落格管理 → 側邊欄位設定 → 頁尾描述

複製下面的語法直接放在頁尾描述中就可以用了

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"></script>
<script type="text/javascript">	

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';	
SyntaxHighlighter.all();</script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css" id="shTheme"/>

預設值是使用<pre/>程式碼xxxx<pre/>來當做要 Highlight 的對象

要呈現程式碼的編碼方式的高亮度呈現

要這樣 <pre calss="brush: csharp"/>就會依程式語言去程現了下面網址是官網對照表

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

再來還有第二種方式可以用好像比較簡單......

step1

複製以下CSS程式碼, 貼在CSS樣式裡

/* Pixnet版 */ 
code { 
display: block; /* 指定元素顯示的形式 與區塊元素相同:block */ 
overflow:auto; /* 超出顯示範圍處理 全部顯示:visible 隱藏:hidden 捲軸:scroll 瀏覽器自動選擇:auto */ font-family: Arial,Courier New; /* 文字字型 */ 
font-size: 10pt; /* 字型大小 */ 
line-height: 15px; /* 文字段落行高 */ 
padding: 10px 10px 10px 21px; /* 內距綜合設定 依序為上右下左 */ 
margin: 5px 40px 5px 40px ; /* 邊界綜合設定 依序為上右下左 */ 
border: 1px dashed #ccc; /* 框線綜合設定 依序為粗細 線類 顏色 */ 
background: #f0f0f0 url(圖片網址) left top repeat-y; /*背景設定 依序為 背景色碼 背景圖URL*/ } 

step2

先將此程式碼code做修改....

．<取代為&lt;
．>取代為&gt;
．&取代為&amp;

step3

改完後, 將程式碼開頭輸入

＜code class="ref"＞和結尾補上＜/code＞

即可完成

參考：

http://lifemirror.pixnet.net/blog/post/30937091

http://weiyiao.pixnet.net/blog/post/23484768