2014-04-02

在Blogger內加入程式碼高亮-使用SyntaxHighlighter

因為懶得再續約domain name，所以從自己架的wordpress轉換到blogger來。但麻煩的是wordpress因為自己完全控制，所以自由度很高，但使用別人家的服務，就必須遵守人家的規則。其他美化什麼的都還好，反正這裡是工作筆記，但就因為是工作筆記，放上程式碼是家常便飯，但blogger並沒提供這個功能，於是只好自己搜尋看有沒有什麼方法...



還好方法不難找，首先我們先到SyntaxHighlighter的官方網站，下載整個壓縮包，解壓縮之後上傳到你可以直接連結檔案的網路空間去。

或是也可以放到google雲端硬碟，上傳好之後把所有檔案的分享設定成公開，然後每個檔案應該都會取得一段類似https://drive.google.com/file/d/XXXXXXXXXXXXXXX/edit?usp=sharing的網址，這個網址直接連並不是檔案內容，重點在紅字部分(每個檔案網址的紅字內容都會不一樣)，複製之後，貼到https://googledrive.com/host/後面，讓他變成https://googledrive.com/host/XXXXXXXXXXX，這個網址才是真正檔案網址。

然後到Blogger設定裡面的範本，按下「編輯HTML」

在<head></head>中間插入底下
<!--必要Core-->
<script src='https://googledrive.com/host/0LLAIONmxMNXotdnNWS3M' type='text/javascript'/><!--shCore.js-->
<!--必要Css-->
<link href='https://googledrive.com/host/0B9LL5IOLeGdxQUg5eUk' rel='stylesheet' type='text/css'/><!--shCore.css-->
<!--預設風格Css，可自己在style目錄底下選擇你喜歡的風格-->
<link href='https://googledrive.com/host/0B9LLIOczZlY1lVZWdicG8' rel='stylesheet' type='text/css'/><!--shCoreDefault.css-->
<!--自己選擇要支援哪些語法-->
<script src='https://googledrive.com/host/B9LLOdThBa3VwcV9zQ28' type='text/javascript'/><!--shBrushVb.js-->
<script src='https://googledrive.com/host/0BOSTJORVljMVhlYzg' type='text/javascript'/><!--shLegacy.js-->
<script src='https://googledrive.com/host/0B9LLIOZGVxOVhiY0k2bmc' type='text/javascript'/><!--shBrushXml.js-->
<script src='https://googledrive.com/host/0LLa0FCdHRVOU11Yjg' type='text/javascript'/><!--shBrushSql.js-->
<script src='https://googledrive.com/host/0B9LLOM1BteVFQNlhHU0k' type='text/javascript'/><!--shBrushPlain.js-->
<script src='https://googledrive.com/host/0B9LL5X1lhbDAzVFNCV1U' type='text/javascript'/><!--shBrushJScript.js-->
<script src='https://googledrive.com/host/0B5Ken5AIOanmhUQ1hZYU0' type='text/javascript'/><!--shBrushCss.js-->
<script src='https://googledrive.com/host/en5AIONnk5U3c1SUhJOFU' type='text/javascript'/><!--shBrushCSharp.js-->
<script src='https://googledrive.com/host/05AIOUnR0WndyV3dBWms' type='text/javascript'/><!--shBrushBash.js-->
<script src='https://googledrive.com/host/0Ken5AIOd3o3bUwyNXFMUFk' type='text/javascript'/><!--shBrushPowerShell.js-->
<script src='https://googledrive.com/host/AIOUkVXOFU5Q1NOUm8' type='text/javascript'/><!--shBrushPhp.js-->
<script src='https://googledrive.com/host/IOcEhzcWJFRFNXakU' type='text/javascript'/><!--shBrushAutoloader.js-->
<script language='javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
(以上網址我都修改過，直接複製是不行的，請依照你檔案的情況調整)
這樣就設定完成。

上面是想要自己保留原始碼的作法，官方也提供了更簡單的方法，只要直接連他們的server就可以取得最新版本的檔案了
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/> 

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js"></script> 
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js"></script> 
<script type="text/javascript">  
    SyntaxHighlighter.config.bloggerMode = true;  
    SyntaxHighlighter.config.stripBrs = true;  
    SyntaxHighlighter.defaults['toolbar'] = false;  
    SyntaxHighlighter.all();  
</script>

之後新增文章如果要插入程式碼，就可用<pre class="brush:xxx>code...</pre>來顯示你的程式碼囉!完整的brush支援列表可看官方說明


張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)