[筆記] 在blogger 使用SyntaxHighlighter

這裡做一個筆記，紀錄如何在Google Blogger 使用SyntaxHighlighter 程式碼顯示。




1. 首先進入Blogger 版面設置 (Template)

2. 編輯HTML

3. 將SyntaxHighlighter  CSS高亮語法(請點我) 複製到 </b:skin> 之前

4.複製以下程式碼至</head> 之前 

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>


5. 複製以下程式碼至 </body> 之前 

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

6. 儲存版面設置 

7. 欲使用 SyntaxHighLighter 語法時候，在HTML編輯區用以下語法即可。

<pre name="code" class="php">
    echo "I like PHP";
</pre>

8. 畫面展示 
>




require 'rubygems'

get '/' do
    "hello world"
end 

參考來源 :

1. 支援語言請點我

2. 加入跳脫字元正常顯示online版

3. stackoverflow

4. SyntaxHighlighter