Blog 內插入美觀程式碼 SyntaxHighlighter

使用 SyntaxHighlighter 3.0.83

官方網站：http://alexgorbatchev.com/SyntaxHighlighter/

1.到 官網 下載，解開並上傳至網路空間或使用 hosted version.

2.加入下方程式碼到網頁中，使用 blogger 需開啟 bloggerMode 為 true

<link type="text/css" rel="stylesheet" href="script_path/shCore.css"/>
<link type="text/css" rel="stylesheet" href="script_path/shThemeDefault.css" id="shTheme"/>
<script type="text/javascript" src="script_path/shCore.js"></script>
<script type="text/javascript" src="script_path/shBrushBash.js"></script>
<script type="text/javascript" src="script_path/shBrushCpp.js"></script>
<script type="text/javascript" src="script_path/shBrushCSharp.js"></script>
<script type="text/javascript" src="script_path/shBrushCss.js"></script>
<script type="text/javascript" src="script_path/shBrushJS.js"></script>
<script type="text/javascript" src="script_path/shBrushPhp.js"></script>
<script type="text/javascript" src="script_path/shBrushSql.js"></script>
<script type="text/javascript" src="script_path/shBrushVb.js"></script>
<script type="text/javascript" src="script_path/shBrushXml.js"></script>
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode = true;</script>
<script type='text/javascript'>SyntaxHighlighter.all();</script>

3.使用 <pre /> 方式調用

<pre class="brush: css;">
/* Footer
----------------------------------------------- */
#footer {
clear:both;
padding:15px 0 0;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
}
</pre>

4.DEMO 效果

/* Footer
----------------------------------------------- */
#footer {
clear:both;
padding:15px 0 0;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
}

5.注意事項
使用 <pre /> 方式調用時，
所有的左括號 < 都必需 HTML escaped ，
也就是需使用 < 來代替。