初學 SyntaxHighlighter

很多人都會在部落格(BLOG)介紹或分享自己所撰寫的程式碼給別人參考，但是直接把程式碼貼在文章上卻很醜，也不會顯示行數和變色，就算是一支好的程式也會因為外觀使可讀性變差，讓人根本不想看一眼(除非程式寫的真的非常好)

所以現在已經有專門讓人在部落格或其他網站專門讓人分享程式碼的套件囉

套件名稱為SyntaxHighlighter

它可以讓分享在網頁上的程式碼更具可讀性 ，包括了顯示行數和凸顯程式顏色，而且支援很多種程式語言(C++、PHP、Java等等)

Demo

$a = 'hello';
$b = 'world';
echo $a . $b;

上面是使用這個套件所呈現程式碼的樣式，在此是使用PHP當範例大家可以試試別種程式語言，可以看到他有顏色和行數，看起來非常漂亮啊~至於要怎麼使用這個套件呢?

首先先將下列程式貼到網頁的head中，在此是使用官方的資源，如果想由本地使用這些檔案，官方也有提供下載點可以直接把這些檔案抓到本地使用(建議是將檔案抓到自己伺服器使用而非使用官方鏈結)

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css"/>
 <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script type="text/javascript" src="https://sites.google.com/site/cpchou0110/js/syntaxhighlighter_3-0-83/scripts/shCore.js"></script>
   
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>               
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'></script>         
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>               
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>                
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>          
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>                 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>              
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>                 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>              
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>                
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>              
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>              
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>                
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>              
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>             
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>                
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>                 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>               
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>          
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython..js' type='text/javascript'></script>             
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>                
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js' type='text/javascript'></script>                
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>               
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>                 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>                  
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>                 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'></script>                   
 
 <script type="text/javascript">
  SyntaxHighlighter.config.bloggerMode = true; 
  SyntaxHighlighter.all();
    </script>

然後就可以開始使用他的套件了，使用方式以上面的Demo為例，在頁面中貼入下列程式就可以呈現套件的功能，brush中填寫的是你所要展示的程式碼語言，其他所支援的語言請看官方的說明

<pre class="brush: php">
$a = 'hello';
$b = 'world';
echo $a . $b;
</pre>