SyntaxHighlighter代码加色使用方法


Posted in Javascript onSeptember 07, 2008

它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML

下载地址:http://www.dreamprojections.com/syntaxhighlighter/
或http://code.google.com/p/syntaxhighlighter/
演示地址:http://www.dreamprojections.com/syntaxhighlighter/Tests/PHP.html

该工具核心基于javascript,使用起来很简单:

1、假设网页文件test.htm存放在一个目录,将dp.SyntaxHighlighter解压缩,并复制其中的Scripts文件夹和styles文件夹,确保和test.html在同一个目录下面。

2、在网页的<head></head>之间插入以下代码:
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>

3、在网页要显示程序源代码的地方插入以下代码,若是HTML类型的话,用XML(其它的如class="js"表示以js语法显示源代码,其他可设定的class值分别为c#、css、c、elphi、java、js、php、python、ruby、sql、vb、xml):

<textarea name="code" class="js" rows="15" cols="100">
程序源代码放在这儿
</textarea>

说明:
name="code"是必须的,不能更改;
class="xml"是着色的方式,即需要着色的代码的类型,根据需要进行更改。

4、在网页尾部的</body>之前插入以下代码:

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

一个页面里面可以包含任意多个需要着色的代码段;
压缩包中有各种着色代码类型的着色案例,大家可以参照使用。

方法二:

1. 首先在页面上添加如下代码(假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面,注意目录结构):

<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>

<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

官方的安装中没有window.onload,我想这个还是需要的,毕竟,页面加载的时候我就需要给代码着色。

2. 使用方法如下:

方法一:使用pre

<pre name="code" class="c-sharp">
... some code here ...
</pre>

方法二:使用textarea

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

另外,这里还有一些高级特性的设置方法可供参考,诸如代码折叠等。

Javascript 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
vue中$refs的用法及作用详解
Apr 24 Javascript
很多人都是用下面的js刷新站IP和PV
Sep 05 #Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 #Javascript
IE浏览器PNG图片透明效果代码
Sep 02 #Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 #Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 #Javascript
jquery复选框CHECKBOX全选、反选
Aug 30 #Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 #Javascript
You might like
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
jQuery实现雪花飘落效果
2020/08/02 jQuery
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Python高级property属性用法实例分析
2019/11/19 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
新大陆软件面试题
2016/11/24 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
三八妇女节活动总结
2014/05/04 职场文书
创先争优演讲稿
2014/09/15 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
新郎结婚感言
2015/07/31 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
MySQL的索引你了解吗
2022/03/13 MySQL