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 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
js事件(Event)知识整理
Oct 11 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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
xajax写的留言本
2006/11/25 PHP
php 魔术函数使用说明
2010/02/21 PHP
php date()日期时间函数详解
2010/05/16 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
PHP count()函数讲解
2019/02/03 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
layer弹出层扩展主题的方法
2019/09/11 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
对Python中plt的画图函数详解
2018/11/07 Python
python 用下标截取字符串的实例
2018/12/25 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
flask 实现token机制的示例代码
2019/11/07 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript