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 相关文章推荐
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
React更新渲染原理深入分析
Dec 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
global.php
2006/12/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
javascript实现日历效果
2019/06/17 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
python2.7实现爬虫网页数据
2018/05/25 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
用Python 执行cmd命令
2020/12/18 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
2014年行政助理工作总结
2014/11/19 职场文书
美丽人生观后感
2015/06/03 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android