2010年7月8日 星期四

SyntaxHighlighter 1.x版本 ( 3.0版本不同 )

忘了說,

我的BLOGGER可以用插入標籤,

把code複製上來,還能幫你排版+highlight

我是裝了SyntaxHighlighter,不過是舊版本1.5.1的

>網址<

下載後解壓縮,把script和styles的檔案

找個"可用"空間上傳,

我是用google sites,原先的google page已經停掉了

上傳完後,去修改BLOGGER的設計版面

點進HTML修改,把 展開小型範本 打勾

然後把所有上傳的檔案路徑都加到"<head>"裡面
...


<link href='yourURL/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='yourURL/shCore.js'/>
<script language='javascript' src='yourURL/shBrushCpp.js'/>
<script language='javascript' src='yourURL/shBrushCSharp.js'/>
<script language='javascript' src='yourURL/shBrushCss.js'/>
<script language='javascript' src='yourURL/shBrushDelphi.js'/>
<script language='javascript' src='yourURL/shBrushJava.js'/>
<script language='javascript' src='yourURL/shBrushJScript.js'/>
<script language='javascript' src='yourURL/shBrushPhp.js'/>
<script language='javascript' src='yourURL/shBrushPython.js'/>
<script language='javascript' src='yourURL/shBrushRuby.js'/>
<script language='javascript' src='yourURL/shBrushSql.js'/>
<script language='javascript' src='yourURL/shBrushVb.js'/>
<script language='javascript' src='yourURL/shBrushXml.js'/>




然後,以後把code貼上來,


利用


<class="java" name="code">
...
code
...
</pre>


如下:



public class HelloWorld{
public static void main(String args[]){
System.out.println("Hello World!");
}
}



註解:

在寫文章時,把code包在pre裡面時,

存檔時,會因為html對於 左箭頭的誤判,

會自動補上右箭頭,

所以在弄得時候,可以把左箭頭用下面方法來取代:

用 &#60; 取代 '<'

用 &#62; 取代 '>'

或是用 postable ,先把程式碼轉換後,直接放進來就可以拉!


------------------------------------------------------

備註:
以上是用1.X版本,若是用3.0版本的話,使用方法可能不同

可以參考下面改法!


1.
先到: http://alexgorbatchev.com/SyntaxHighlighter/download/ 下載檔案
2.
把需要用到的檔案傳到可以用的空間(例如:Google site)
3.
在你的blogger設計範本加入以下:

<link rel="stylesheet" type="text/css" href="yourURL/shCore.css" />
<link rel="stylesheet" type="text/css" href="yourURL/shThemeDefault.css" />

<script src='yourURL/shCore.js' type='text/javascript'/>
<script src='yourURL/shBrushCpp.js' type='text/javascript'/>
<script src='yourURL/shBrushCSharp.js' type='text/javascript'/>

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>

可以把你需要的.js檔案放上去,放一些需要的就好了!

4.
用法上,也有一些改變(如下)

<pre class="brush: cpp">
你的程式碼!
</pre>



剛試過了,還是會有tag沒對其的小問題,

只好先用取代的吧,看看之後有沒有好方法解決囉!

沒有留言:

張貼留言