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

更新时间：2010年02月04日 15:55:30 作者：

syntaxhighlighter是一个小开源项目，它可以在网页中对各种程序源代码语法进行加亮显示。

https://www.jb51.net/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> 

您可能感兴趣的文章:

js实现input密码框提示信息的方法(附html5实现方法)
这篇文章主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下
2016-01-01
bootstrap fileinput完整实例分享
这篇文章主要为大家分享文件上传组件bootstrap fileinput完整实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JavaScript定义类和对象的方法
这篇文章主要介绍了JavaScript定义类和对象的方法,分别以函数方式与Object类方式实现,是javascript非常重要的技巧,需要的朋友可以参考下
2014-11-11
javaScript中一些常见的数据类型检查校验
最近在面试的时候又被问到JS中检查校验数据类型的方法,所以这篇文章主要给大家介绍了关于javaScript中一些常见的数据类型检查校验的相关资料,需要的朋友可以参考下
2022-05-05
js实现自定义进度条效果
本文主要介绍了js实现自定义进度条效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript中停止执行setInterval和setTimeout事件的方法
这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下
2015-05-05
JavaScript 数组的进化与性能分析
这篇文章主要介绍了JavaScript 数组的进化与性能分析,本文讲得更多的是内存、优化、语法差异、性能、近来的演进。需要的朋友可以参考下
2017-09-09
Layui表格行工具事件与数据回填方法
今天小编就为大家分享一篇Layui表格行工具事件与数据回填方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
uniapp开发微信小程序自定义顶部导航栏功能实例
uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发微信小程序自定义顶部导航栏功能的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
微信小程序实现下拉菜单切换效果
这篇文章主要为大家详细介绍了微信小程序实现下拉菜单切换效果，筛选条件功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11