為了能讓我的部落格可以顯示程式區塊，我上我搜尋了一下方法，花了不少時間才完全用好。
以下是我的方法
1.下載 SyntaxHighlighter
2.下載修正過後的 shCore.css 檔 (原本的shCore會有機會出現多行空白的問題)
3.解壓縮 syntaxhighlighter_3.0.83.zip
4.使用Google協作平台
 |
| 建立新頁面 |
 |
| 輸入檔名建立 |
 |
| 新增檔案 |
shCore必定要上傳(前面可以下載修正版)，其它看你是要用什麼語法，就去scripts資料夾裡找並且新增上去。點我參考
例如我是要寫C++我就對照表格上傳File name 為 shBrushCpp.js 的檔
 |
| 再新增2個必要檔案(styles資料夾) |
5.上傳好之後 開啟 Blogger 在範本的地方點選編輯HTML
6. Ctrl+F搜尋<head>
7.在<head>下方加入
<link href='shCoreDefault.css的檔案位置' rel='stylesheet' type='text/css'/>
<link href='shCore.css的檔案位置' rel='stylesheet' type='text/css'/>
<script src='shCore.js的檔案位置' type='text/javascript'/>
<script src='你要的語言.js的檔案位置' type='text/javascript'/>
<script src='你要的語言.js的檔案位置' type='text/javascript'/>
<script src='你要的語言.js的檔案位置' type='text/javascript'/>
<script src='你要的語言.js的檔案位置' type='text/javascript'/>
.............
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>
藍字是一定要打上去的，咖啡色字是你要的語言(可以有很多個)
其中檔案的位置是我們在Google協作平台上檔案的地址，可以右鍵點屬性查看。
地址取 ? 之前的網址
好了之後大概會像這樣
<link href='https://sites.google.com/site/101432688g/file/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/101432688g/file/shCore.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/101432688g/file/shCore.js' type='text/javascript'/>
<script src='https://sites.google.com/site/101432688g/file/shBrushCpp.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>
然後就貼入儲存
8.之後要使用時要在HTML中使用
文法如下
<pre class="brush: 你的語言;">
你的程式碼
</pre>
你的語言要對應 Brush aliases 打進去。
例如我是C++我可以打<pre class="brush: cpp;">或<pre class="brush: c;">
注意:某些字元例如『>』,『<』要轉換成Html編碼才能使用，所以可以把程式碼打到這裡轉換再貼進去(程式碼就好)
=============================================================================
實作:
 |
| 轉換 |
 |
| 貼入HTML中 |
 |
| 預覽出現 |
#include <iostream>
#include <cstdlib>
using namespace std;
int main(int argc, char** argv) {
cout << "紅葉晚蕭蕭，長亭酒一瓢。 殘雲歸太華，疏雨過中條 " ;
cout << "樹色隨關迥，河聲入海遙。 帝鄉明日到，猶自夢漁樵 " ;
system("PAUSE");
return EXIT_SUCCESS;
}
=============================
2013/07/17
沒有留言:
張貼留言