就survey了兩套javascript library,心得與安裝方法如下:
1.google code prettify
如何安裝?
1.加入javascript與css到網頁上:
<script type="text/javascript src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> <link type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link>*host on google code,未壓縮(57KB) 有網頁空間的可以自己下載來用
*http://jsgears.googlecode.com/svn/trunk/prettify.min/ 這裡有壓縮版(16KB)的檔案可以引用
2.於讀取網頁時執行語法高亮函式:
<body onload="prettyPrint">
如果與其他設定重複了可加入Event Handler:
<script type="text/javascript">
if(window.addEventListener){
addEventListener('load',function(){prettyPrint();},false);
}else{
attachEvent('onload',function(){prettyPrint();});
}
</script>
3.於想要加強語法效果處加入class="prettyprint":
<pre class="prettyprint">並可設定想加強的語法關鍵字:
<pre class="prettyprint lang-js">
2.Syntax Highlighter
如何安裝?
1.加入基本的javascript與css設定:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css'
rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'
type='text/javascript'></script>
*hosting on amazon s3,shCore.js為壓縮版(21K)2.加入要使用的語法以及css主題:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>主題預覽可以看這個網頁:http://blog.cartercole.com/2009/10/awesome-syntax-highlighting-made-easy.html
3.執行Syntax Highlighter:
在blogger要多設定bloggerMode= true;
updated:最新的版本取消了這個功能,現在只要double click就可以選取全文
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
4.於想要加強語法效果處加入class="brush: [語法]":
<pre class="brush:js;"
可設定無行號的light模式:
<pre class="brush:js;light:true;">
可指定行號加入強調效果:
<pre class="brush:js;highlight:[1];">
比較:
大小:兩者差不多,syntax highlighter要讀取比較多的語法檔與css主題,而prettify比較簡單
但syntax highlighter有官方的壓縮檔host
效果:syntax highlighter效果比較好,有行號,高亮,還有各種不同主題與剪貼簿功能
對應語言:各有長處,但syntax highlighter的語法檔比較好懂
不過最後我發現prettify在ie7會有把多行擠成一行的bug,
所以決定用Syntax Highlighter了 :)
updated:最新的3.0版讓版面變得有點討厭...不會自動換行,現在正在修改中...
