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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
React复制到剪贴板的示例代码
Aug 22 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 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
Zend引擎的发展 [15]
2006/10/09 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
元宵晚会主持词
2014/03/25 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
员工生日活动方案
2014/08/24 职场文书
英语导游词
2015/02/13 职场文书
辞职信标准格式
2015/02/27 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
pytorch 使用半精度模型部署的操作
2021/05/24 Python