使用SyntaxHighlighter实现HTML高亮显示代码的方法


Posted in Javascript onFebruary 04, 2010

https://3water.com/jiaoben/15599.html
syntaxhighlighter是一个小开源项目,它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:
C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML
使用方法:
1、假设网页文件test.htm存放在一个目录,则将dp.SyntaxHighlighter解压缩到该目录下的子目录,假设为images

2、在网页的<head></head>之间插入以下代码:

<link type="text/css" rel="stylesheet" href="images/Styles/SyntaxHighlighter.css"></link>

3、在网页要显示程序源代码的地方插入以下代码(其中的class="js"表示以js语法显示源代码,其他可设定的class值分别为
c#、css、c、delphi、java、js、php、python、ruby、sql、vb、xml):
<textarea name="code" class="js" rows="15" cols="100"> 
//程序源代码放在这儿 
</textarea>

4、在网页尾部的</body>之前插入以下代码:

<script class="javascript" src="images/Scripts/shCore.js"></script> 
<script class="javascript" src="images/Scripts/shBrushCSharp.js"></script> 
<script class="javascript" src="images/Scripts/shBrushPhp.js"></script> 
<script class="javascript" src="images/Scripts/shBrushJScript.js"></script> 
<script class="javascript" src="images/Scripts/shBrushJava.js"></script> 
<script class="javascript" src="images/Scripts/shBrushVb.js"></script> 
<script class="javascript" src="images/Scripts/shBrushSql.js"></script> 
<script class="javascript" src="images/Scripts/shBrushXml.js"></script> 
<script class="javascript" src="images/Scripts/shBrushDelphi.js"></script> 
<script class="javascript" src="images/Scripts/shBrushPython.js"></script> 
<script class="javascript" src="images/Scripts/shBrushRuby.js"></script> 
<script class="javascript" src="images/Scripts/shBrushCss.js"></script> 
<script class="javascript" src="images/Scripts/shBrushCpp.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
Javascript 相关文章推荐
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
js有关元素内容操作小结
Dec 20 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
layui动态表头的实现代码
Aug 22 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 #Javascript
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
javascript 三种编解码方式
Feb 01 #Javascript
You might like
php Undefined index的问题
2009/06/01 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP抽象类 介绍
2012/06/13 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python读写二进制文件的方法
2015/05/09 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python+mysql实现教务管理系统
2019/02/20 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
行政专员求职信范文
2014/05/03 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
党员思想汇报材料
2014/12/19 职场文书
2015年财政局工作总结
2015/05/21 职场文书
老干部座谈会主持词
2015/07/03 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android