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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
webpack之devtool详解
Feb 10 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
vue 自定义组件的写法与用法详解
Mar 04 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
帅气的琦玉老师
2020/03/02 日漫
PHP面向对象概念
2011/11/06 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
google 搜索框添加关键字实现代码
2010/04/24 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
AngularJS快速入门
2015/04/02 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python模拟三级菜单效果
2017/09/11 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python实现点云投影到平面显示
2020/01/18 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
商务日语毕业生自荐信范文
2013/11/14 职场文书
生态养殖创业计划书
2014/05/06 职场文书
微笑服务演讲稿
2014/05/13 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书