2010/06/05

Google Blogger 使用 SyntaxHighlighter[高亮度程式碼顯示]

SyntaxHighlighter 的官方網站
SyntaxHighlighter 的下載頁面
  1. 先將至官方網站下載的檔案解壓縮，並將解壓縮後的檔案，都上傳至您的網頁空間。
  2. 移至您的Blogger>版面配置>修改 HTML(將文字[WebSiteLocation]置換成您放檔案的位置)。
  3. 將以下的程式碼貼上於樣板的<head></head>之間。
    4. <link type="text/css" rel="stylesheet" href="WebSiteLocation/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="WebSiteLocation/styles/shThemeDefault.css"/>
<script type="text/javascript" src="WebSiteLocation/scripts/shCore.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shLegacy.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="WebSiteLocation/scripts/shBrushXml.js"></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.config.clipboardSwf = 'WebSiteLocation/scripts/clipboard.swf';//需要複製功能則須加此行程式
SyntaxHighlighter.config.strings.viewSource = "檢視原始檔";//異動顯示名稱
SyntaxHighlighter.config.strings.copyToClipboard = "複製到剪貼簿";//異動顯示名稱
SyntaxHighlighter.config.strings.copyToClipboardConfirmation = "程式碼已經複製到剪貼簿";//異動顯示名稱
SyntaxHighlighter.config.strings.print = "列印";//異動顯示名稱
SyntaxHighlighter.config.strings.help = "關於我";//異動顯示名稱
SyntaxHighlighter.config.strings.expandSource = "檢視程式碼";//程式碼縮起來時，所顯示的文字
SyntaxHighlighter.defaults['collapse'] = true;//將程式碼預設縮起來
SyntaxHighlighter.all();
</script>
  4. 更改引用的樣式
    5. 下載的檔案，資料夾styles內有這七種style，可以自行替換使用。
  5. 如何使用呢?
    6. 

    1. 使用 CDATA 將程式碼包覆在其中
      2. 

      <script type="syntaxhighlighter" class="brush:html;"><![CDATA[
*****Your Code*****
]]></script>

    2. 使用 <pre> 將程式碼包覆在其中
      3. 

      <pre class="brush:html;">
*****Your Code*****
</pre>

  6. Brush name 的定義
    7. 










張貼者：
卡爾陳


於
6/05/2010 07:16:00 下午



























沒有留言:















張貼留言


















        

      









訂閱：
張貼留言 (Atom)