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

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 850 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#语言 #javascript #yahoo #yui #html #工具

SyntaxHighlighter是一款基于JavaScript的代码高亮工具，支持多种编程语言如HTML、CSS及Java等。通过简单配置即可实现网页中代码片段的语法高亮显示。

原名：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,等；
一个页面里面可以包含任意多个需要着色的代码段；
压缩包中有各种着色代码类型的着色案例，大家可以参照使用。
www.div-css.com里面的各代码案例就是使用的SyntaxHighlighter来进行的着色。大家可以具体看看效果：