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必备 api中英文对照的chm手册 下载
May 03 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
Javascript var变量删除原理及实现
Aug 26 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python模拟登陆实现代码
2017/06/14 Python
使用python实现链表操作
2018/01/26 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python callable内置函数原理解析
2020/03/05 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
如何掌握自荐信格式呢
2013/11/19 职场文书
学校门卫工作职责
2013/12/07 职场文书
安全保证书范文
2014/04/29 职场文书
停车位租赁协议书
2014/09/24 职场文书
个人作风建设自查报告
2014/10/22 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
关于倡议书的范文
2015/04/29 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
整理Python中常用的conda命令操作
2021/06/15 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android