摘要:SyntaxHighlighter,是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言,本文不对该开源项目进行解析,只是简单阐述一下它的几种用法。该项目可以从http://code.google.com/p/syntaxhighlighter/获得。
本站文章除非注明,否则都为原创,转载请注明出处。
本文链接:SyntaxHighlighter 使你的代码像csdn一样
1. 下载该项目源代码,解压放在网站的目录下,得到该项目的访问路径,示例中的路径是:http://uefacl-cn.com/home/highlight/,定义该路径为__HIGHLIGHT_PATH__,你可以访问http://uefacl-cn.com/home/highlight/Styles/SyntaxHighlighter.css来进行测试
2. 在需要加入代码特效的网页(或者直接在生成网页的模版)中的<head></head>之间加入如下代码:
<link type=”text/css” rel=”stylesheet” href=”http://uefacl-cn.com/home/highlight/Styles/SyntaxHighlighter.css”></link> 以引用该css。如果使用php进行动态网页构建,可以采取如下引用方式:
<link type=”text/css” rel=”stylesheet” href=”<?php echo __HIGHLIGHT_PATH__; ?>SyntaxHighlighter.css”></link>
3. 在需要加入代码特效的位置添加如下代码:当然textarea的其他属性需要由你自己定制。
<textarea name=”code” style=”resize: none; padding: 3px; font-family: ‘Courier New’,Courier,monospace; width: 100%; height: 280px;” rows=”12″>
这里写下你的代码就可以了。
</textarea>
4. 在网页尾部的</body>之前插入以下代码,也可以在模版页面footer.php中加入(一般的动态网站或者建站平台都是这样的吧?)
<script src=”http://uefacl-cn.com/home/highlight/Scripts/shCore.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushCSharp.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushPhp.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushJScript.js”></script>
<script src=”http://uefacl-cn.com/home/highlight/Scripts/shBrushJava.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushVb.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushSql.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushXml.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushDelphi.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushPython.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushRuby.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushCss.js”></script>
<script src=”<?php echo __HIGHLIGHT_PATH__; ?>Scripts/shBrushCpp.js”></script>
<script>
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>