[程式設計] 顯示程式碼--SyntaxHighlighter

在 Blogger 上顯示程式碼, 真的很麻煩. 尤其是顯示 C++ code.

現在你可使用 SyntaxHighlighter

----------------------------------------------------------

注意:

    C++ 的 template 在 Opera 下會出錯! 例如:

    CComPtr<IEnumMediaTypes> emt;   

----------------------------------------------------------

 

Step 1: 下載 SyntaxHighlighter, 並解開

 

Step 2: 到 http://pages.google.com 

a.上傳 Scripts 中的 *.js ,*.swf 與 Styles 中的 *.css

注意: 一定要有 shCore.js

Step 3: 到 Blogger -> [控制主頁] -> [版面配置] -> [修改 HTML] ->[修改範本]

在 </body> </html> 的前面, 加入下面的程式碼. (將你的首頁填入剛剛在 pages.google.com 申請的位址)

(我只選擇了幾項cpp 等常用的程式碼 ...)

--------------------------------- code ------------------------------

<link href=http://你的首頁/SyntaxHighlighter.css type="text/css" rel="stylesheet"></link> 
<script language="javascript" src="http://你的首頁/shCore.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushCpp.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushCSharp.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushJava.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushJScript.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushPhp.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushPython.js"></script> 
<script language="javascript" src="http://你的首頁/shBrushXml.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.ClipboardSwf="http://你的首頁/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

---------------------------------end of  code ------------------------------

 

Step 4:  顯示 cpp 程式碼時

--------------------------------- code ------------------------------

    <pre class="cpp" name="code" >

            void main() {

            }

     </pre>

--------------------------------- end of code ------------------------------

 

更多的範例: http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html

 

by Jing