ZBLOG利用dp.SyntaxHighlighter进行语法高亮(转) - 巴士飞扬-专注编程,网站,专业技术

利用dp.SyntaxHighlighter进行语法高亮先看个最终效果,然后再后面看文章

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

* @author 草履虫
* @date 2007-6-22
* @email caolvchong@gmail.com
* @program 语法高亮
*-----------------------------------*/
function welcome(){
if(arguments[0]=="bye"){
return;
}
else{
var guest;
for(var i=0;i < arguments.length; i++){
guest+="'"+arguments[i]+"'";
}
alert("hello,"+guest+"!");
}
}

/*----------------------------------- * @author	草履虫 * @date	2007-6-22 * @email	caolvchong@gmail.com * @program	语法高亮 *-----------------------------------*/	function welcome(){		if(arguments[0]=="bye"){			return;			}		else{			var guest;			for(var i=0;i < arguments.length; i++){				guest+="'"+arguments[i]+"'";				}			alert("hello,"+guest+"!");		}	}

具体操作过程如下:

2.解压到需要的目录

然后务必看下里面的例子调用,你就明白怎么处理,不要盲目和我下面处理成一样的

3.文章输出页面的修改:
在head中加入SyntaxHighlighter.css,路径要写对
在body结束前加入你需要的js文件,同样路径要写对
如果你看过下载下来文件中自带的例子,你会很容易看懂上面两句话的

4.下面是一个具体过程是:
  -----解压文件夹到/dp.SyntaxHighlighter下(网站根目录,我使用虚拟路径,后面也一样,你也可以用相对路径或者url)
-----我删除了里面的例子,只保留了两个文件夹:Scripts和Styles
-----我使用的是Z-blog,因此修改Z-blog输出页面:
    Z-blog输出页面是default.html(首页)和single.html(具体新闻页)
    在这两个页面的head区加入

view plain copy to clipboard print ?

link标签:type="text/css" rel="stylesheet" href="/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"(这句在firefox下显示不出来,所以这样表示)

		link标签:type="text/css" rel="stylesheet" href="/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"(这句在firefox下显示不出来,所以这样表示)

在body结束前加入

view plain copy to clipboard print ?

<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shCore.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushVb.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushDelphi.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></SCRIPT>
<SCRIPT class=javascript src="/dp.SyntaxHighlighter/Scripts/shBrushCpp.js"></SCRIPT>
<SCRIPT class=javascript>
dp.SyntaxHighlighter.ClipboardSwf = '/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>

你不一定要加入这么多,比如你根本用不到Delphi或者VB,你大可不加对应的script,并且可以删除对应文件

  -----Z-Blog还要修改一些文件:
    /function/c_system_event.asp中Ctrl+G找到266行,找到:
      Case "fckeditor"
       objArticle.Content=Request.Form("txaContent")
       objArticle.Content=Replace(objArticle.Content,vbCrLf,"")'把这句注释掉
       objArticle.Content=Replace(objArticle.Content,vbLf,"")'把这句注释掉
    /function/c_system_lib.asp中Ctrl+F搜索[vbCrlf],有两处,去掉(一个控制首页一个控制具体页,换行功能)
    然后重建文件即可

5.使用
  使用源码标签pre进行调用,而XML/HTML还可以采用textarea标签,如<br/>
  <pre name="code" class="js"></pre>
这样你可以加入js代码语法高亮显示
  同样的,如果你用其他代码,修改class即可.如:
  Ruby用<pre name="code" class="ruby"></pre>等等.这些可以查看自带的例子,有很清晰的应用

6.后续:
如果你愿意,可以把这个功能捆绑在编辑器上(如捆绑在fckeditor,而Rich Editor这款编辑器上就带有语法高亮功能),这个功能大家有兴趣的可以研究下
最后,有个问题提出,在firefox下长的句子可能不能断行而出现滚动条,你可以尝试给pre或textarea设计样式来解决

转自:http://cceer.xmu.edu.cn/blog/post/SyntaxHighlighter.html

1.下载最新的dp.SyntaxHighlighter包,目前最新的是1.5版本
你可以登陆http://code.google.com/p/syntaxhighlighter/下载最新版本
关于dp.SyntaxHighlighter:
dp.SyntaxHighlighter是一个用于对各种程序源代码语法进行加亮显法的 JavaScript工具。支持当前流行的各种编程语言包括：C#，C++，Delphi，Java，JavaScript，PHP，Python， Ruby，SQL，VisualBasic，XML/HTML

Tags: SyntaxHighlighter zblog系统

原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.cn/

本文链接地址：http://www.busfly.cn/post/ZBLOG-SyntaxHighlighter.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~