家园首页 Php4手册 我的相册 家园下载 个人文集 给我留言
我形我塑,网络相册,www.5x54.com 相册 相册 心情相册,少女相册 免费申请,我形我塑免费相册
 家园 个人文集   http://www.5x54.com
 


代码着色工具,支持HTML,CSS,JS等多种语言


作者:google.com    点击: 读取中...次    发布日期:2008-06-09.13:08

Google官方下载地址:http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar
Google官方下载地址:http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.0.zip
Google官方下载页面:http://code.google.com/p/syntaxhighlighter/downloads/list
5x54.com效果测试页http://www.5x54.com/JS/TestPhp.html

原名:SyntaxHighlighter,是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI,当时还属于自由软件,最近打开官方网站发现已被goolge收编。

该工具核心基于javascript,使用起来很简单,分两步即可搞定:
1.解压压缩包,将script中的js都上传到你的空间,在你的需要用到代码着色功能页面的底部嵌入这些js文件,这样:

<script class="javascript" src="scripts/shCore.js">
<script class="javascript" src="scripts/shBrushCSharp.js">
<script class="javascript" src="scripts/shBrushPhp.js">
<script class="javascript" src="scripts/shBrushJscript.js">
<script class="javascript" src="scripts/shBrushJava.js">
<script class="javascript" src="scripts/shBrushVb.js">
<script class="javascript" src="scripts/shBrushSql.js">
<script class="javascript" src="scripts/shBrushXml.js">
<script class="javascript" src="scripts/shBrushDelphi.js">
<script class="javascript" src="scripts/shBrushPython.js">
<script class="javascript" src="scripts/shBrushRuby.js">
<script class="javascript" src="scripts/shBrushCss.js">
<script class="javascript" src="scripts/shBrushCpp.js">
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll(code);

2.用
<textarea name="code" class="xml">
</textarea>
把你的代码包含起来,即可。
说明:
name="code"是必须的,不能更改;
class="xml"是着色的方式,即需要着色的代码的类型,若是HTML类型的话,用XML,其它的有CSS,PHP,等;
一个页面里面可以包含任意多个需要着色的代码段;
压缩包中有各种着色代码类型的着色案例,大家可以参照使用。

How to use SyntaxHighlighter.
Usage
Placing the code
Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use. 

引用代码:<pre name="code" class="c-sharp">
... some code here ...
</pre>

NOTE: One important thing to watch out for is opening triangular bracket <. It must be replaced with an HTML equivalent of &lt; in all cases. Failure to do won't break the page, but might break the source code displayed. 

An alternative to <pre> is to use <textarea> tag. There are no problems with < character in that case. The main problem is that it doesn't look as good as <pre> tag if for some reason JavaScript didn't work (in RSS feed for example). 

引用代码:<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

Extended configuration
There's a way to pass a few configuration options to the code block. It's done via colon separated arguments. 

引用代码:<pre name="code" class="html:collapse">
... some code here ...
</pre>

Making it work
Finally, to get the whole thing to render properly on the page, you have to add JavaScript to the page. 

引用代码:<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

For optimal result, place this code at the very end of your page. Check HighlightAll for more details about the function. 

收藏此文章     打印此文章     编辑此文章    『关闭窗口』