作者kewang (一切都不对了～)
看板Ajax
标题[分享] SyntaxHighlighter出2.1版了
时间Sat Dec 5 18:31:18 2009
网页版：
http://kewang.pixnet.net/blog/post/25468641
之前我写过一篇关於如何在网页上利用SyntaxHighlighter这个library的文章，就可以显
示漂亮的程式语法了。可是那时候我没有告诉大家，要如何在你的blog上做这些设定。其
实还蛮简单的，这边就以Pixnet为例吧。
01 <script type="text/javascript">
02 jQuery(function(){
03 if(jQuery("pre[class^='brush'],
script[type='syntaxhighlighter']").length > 0){
04
jQuery.getScript("
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js",
function(){
05 SyntaxHighlighter.config.stripBrs = true;
06 SyntaxHighlighter.all();
07 });
08
09
jQuery.getScript("
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js");
10
jQuery.getScript("
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js");
11
jQuery.getScript("
http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js");
12
13 jQuery(document.createElement("link")).attr({
14 type: "text/css",
15 href:
"
http://alexgorbatchev.com/pub/sh/current/styles/shCore.css",
16 rel: "stylesheet",
17 media: "screen"
18 }).appendTo(jQuery("head").get(0));
19
20 jQuery(document.createElement("link")).attr({
21 type: "text/css",
22 href:
"
http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css",
23 rel: "stylesheet",
24 media: "screen"
25 }).appendTo(jQuery("head").get(0));
26 }
27
28 jQuery("
#box511201").hide();
29 });
在这边假设大家都会用Javascript以及基本的jQuery语法，所以我就不说太详细啦。首先
先增加一个可以放javascript的侧边栏位，然後把程式码都复制进去。第3行的判断式，
主要是拿来判断目前这一页的原始码是否含有pre标签，而且class是brush开头；或者是
script标签，而且 type是syntaxhighlighter。用pre标签是SyntaxHighlighter 2.0的语
法，而用script标签是2.1的语法，为了相容我就两个都加上去啦。
如果判断式符合的话，就执行下面的程式，因为我会放程式码的文章不多，所以只要你看
的这个网页没有符合这个条件的话，就不会读取 SyntaxHighlighter的js以及css档了，
这主要是为了节省网路频宽，要不然每一篇文章都要读取这些js以及css，会拖慢网页的
开启速度。
第5跟第6行则是执行SyntaxHighlighter，第5行stripBrs=true主要是用在blog上，如果
blog的HTML Editor会自动换行的话，这边就要设定将stripBrs为true，将br标签去除。
剩下的程式都是动态产生标签，因为Pixnet无法自己修改 head标签的资料，所以就只能
用append的方式加上去罗。
再来就是第28行，将你产生的这个侧边栏位隐藏起来，这也是blog常用的技巧之一，然後
就大功告成啦，其他设定就看看官网的使用说明罗！想想看，如果Pixnet不支援jQuery的
话，上面这些语法我恐怕要写的很复杂才能成功的执行吧 = =。
参考资料：
SyntaxHighlighter - 把你的程式码摆在网页上
SyntaxHighlighter:Usage - Alex Gorbatchev
--
杂七杂八的kewang部落格
http://kewang.tw
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.167.130.202