2013年10月20日 星期日

在blogger網誌插入Python程式碼區塊 - SyntaxHighlighter

前置作業
  • SyntaxHighlight 檔案下載
  • Google 協作平台

SyntaxHighlighter 首頁
Google 協作平台

檔案下載

1. 首先進入SyntaxHighlighter網頁的下載區直接下載安裝檔案




2.檔案解壓縮後先取必要的三個檔案出來，"styles"資料夾裡的
shCore.css 和 shThemeDefault.css 以及 "src"資料夾裡的shCore.js；
另外再根據想要張貼的程式碼類型從"scrips"資料夾裡挑選對應的檔案，
這裡使用的是Python所以選擇 shBrushPython.js 。其他支援語言列表

最後總共擷取出來的檔案共有以下四項
shCore.css
shThemeDefault.css 
shCore.js
shBrushPython.js 



上傳檔案

3. 然後進入Google協作平台 網頁建立自我平台 https://sites.google.com/，
不知為何要弄個四層才能進入附件頁面，接下來就上傳步驟2的四個檔案。





修改範本

4.進入blogger後台修改html範本



5.首先找到<head></head>標籤，在裡面插入以下程式碼

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='https://sites.google.com/site/nckulester/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/nckulester/shCore.css' rel='stylesheet'
type='text/css'/>
<script src='https://sites.google.com/site/nckulester/shCore.js' type='text/javascript'/>
<script src='https://sites.google.com/site/nckulester/shBrushPython.js' type='text/javascript'/>

<script language='javascript'>
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

其中四個網址分別就是Google協作平台上四個檔案的下載連結:
"https://sites.google.com/site/nckulester/shThemeDefault.css?attredirects=0&d=1"
原始連結長這樣，實際貼上時"?attredirects=0&d=1"這部分網址可以省略。



6.修改完畢後儲存範本，之後新增文章只要在html頁面加上

<pre name="code" class="brush: python;">
</pre>

中間再插入Python code即可擁有多色彩顯示，brush: 後的python標籤可依不同code形式做更動，其他程式以此類推。


for i in range(1,10):
    print(i)

raw_input("Press any key...")


參考網站：

程式語言教學誌
http://pydoing.blogspot.tw/2010/11/syntaxhighlighter-blogger.html
Brony Walking
http://www.brownylin.com/2010/08/blogger-syntax-highlighter.html



張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)