網頁

2010年8月26日 星期四

【BLOG】Blogger 上安裝 SyntaxHighlighter

張貼者： 標籤： , 於
有時候想要分享程式碼，卻會遇到使用原本HTML 的 或 

標籤顯示的樣式太單調、或是原本程式會因為"tab"的空格問題雜亂不堪。這是該使用Syntax Hightlighter的時候了!!



【1】首先去Syntax Highlighter的網站下載程式，然後解壓縮。


http://alexgorbatchev.com/SyntaxHighlighter/download/



然後到解壓縮後的資料夾中





/scripts 資料夾中copy一個必要檔案與自己所需要的程式語言模組。

→shCore.js

※Syntax Highlighter 官方模組清單解釋





/styles 資料夾中copy以下兩個必要檔案。

→ shCore.css, shThemeDefault.css











【2】接下來，去申請一個Google協作平台把需要的檔案都放上去 或是放到自己擁有的網頁空間中。


開啟Blogger進入管理介面/設計/修改HTML，插入以下必要之程式碼在<head></head>區域裡面。

※要記得把"https://sites.google.com/site/allforandyuse/"改成自己所上傳的檔案位址。







<!--必要檔案-->
<link href="https://sites.google.com/site/allforandyuse/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://sites.google.com/site/allforandyuse/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<!--必要檔案-->
<script src="https://sites.google.com/site/allforandyuse/shCore.js" type="text/javascript"/>
<!--必要程式-->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>




例如這是我自己所使用的 :




<link href="https://sites.google.com/site/allforandyuse/shCore.css" rel="stylesheet" type="text/css"/>
<link href="https://sites.google.com/site/allforandyuse/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script src="https://sites.google.com/site/allforandyuse/shLegacy.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shCore.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushXml.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushSql.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushPython.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushPhp.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushJScript.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushJava.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushCss.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushCSharp.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushCpp.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushBash.js" type="text/javascript"/>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>






【3】使用方法 :




<pre class="brush:html" name="code">
<!--程式碼-->
</pre>




brush:這裡就放程式語言類型


Example:



brush:java



brush:cpp



brush:xml

ps.使用<pre></pre>區塊必須先將 "&"改成&amp ;、"<"改成&lt;、">"改成&gt;



※程式語言對應表 Syntax Highlighter 官方對應表(請看Brush aliases)






























沒有留言:















張貼留言

























        

      









訂閱：
張貼留言 (Atom)