在 Blogger 或網站中插入美觀的程式碼 ~ 使用 syntaxhighlighter 3.0 實戰

如果你喜歡在Blogger中分享程式碼,那麼你一定不可以錯過「syntaxhighlighter」這個工具,他可以讓你在你的Blogger中,排出漂亮的程式碼,另外支援列印等功能,可以說是相當地實用喔!

 

Step 1.
首先,先去SyntaxHiglighter的官方下載網頁,下載此一壓縮包,或者直接按此連結下載。而下載後,請將裡面的「Scripts」內的所有檔案,都上傳至您的網頁空間。

 

Step 2.
接著,繼續加入下列程式碼,其中yoursite是指你的網址。

  1. <link type="text/css" rel="stylesheet" href="yoursite/shCore.css"/>
    
  2. <link type="text/css" rel="stylesheet" href="yoursite/shThemeDefault.css" id="shTheme"/>
    
  3. <script type="text/javascript" src="yoursite/shCore.js"></script>
    
  4. <script type="text/javascript" src="yoursite/shBrushBash.js"></script>
    
  5. <script type="text/javascript" src="yoursite/shBrushCpp.js"></script>
    
  6. <script type="text/javascript" src="yoursite/shBrushCSharp.js"></script>
    
  7. <script type="text/javascript" src="yoursite/shBrushCss.js"></script>
    
  8. <script type="text/javascript" src="yoursite/shBrushDelphi.js"></script>
    
  9. <script type="text/javascript" src="yoursite/shBrushDiff.js"></script>
    
  10. <script type="text/javascript" src="yoursite/shBrushGroovy.js"></script>
    
  11. <script type="text/javascript" src="yoursite/shBrushJava.js"></script>
    
  12. <script type="text/javascript" src="yoursite/shBrushJScript.js"></script>
    
  13. <script type="text/javascript" src="yoursite/shBrushPhp.js"></script>
    
  14. <script type="text/javascript" src="yoursite/shBrushPlain.js"></script>
    
  15. <script type="text/javascript" src="yoursite/shBrushPython.js"></script>
    
  16. <script type="text/javascript" src="yoursite/shBrushRuby.js"></script>
    
  17. <script type="text/javascript" src="yoursite/shBrushScala.js"></script>
    
  18. <script type="text/javascript" src="yoursite/shBrushSql.js"></script>
    
  19. <script type="text/javascript" src="yoursite/shBrushVb.js"></script>
    
  20. <script type="text/javascript" src="yoursite/shBrushXml.js"></script>
    
  21. <script type='text/javascript'>
    
  22. SyntaxHighlighter.config.bloggerMode = true;
    
  23. SyntaxHighlighter.all();
    
  24. </script>

 

Step 3.
再找到模版中所有有關「code」的css程式碼,並且去掉,並且儲存模版。

Step 4.
而要使用的話,只要用將程式碼用「<pre class=”brush: 程式語法;”></pre>」 包起來。如以下的範例。至於詳細的程式語法,可以去「官方的Brush列表」看。

  1. <pre class="brush: html;">
    
  2. <p>this is a test</p>
    
  3. </pre>