使用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 相关文章推荐
js返回前一页刷新本页重载页面
Jul 29 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 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 生成随机验证码图片代码
2010/02/08 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
js里怎么取select标签里的值并修改
2012/12/10 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python递归函数定义与用法示例
2017/06/02 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python学生管理系统开发
2019/01/30 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
挂职思想汇报
2013/12/31 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
小学运动会班级口号
2014/06/09 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
演讲稿开场白台词
2014/08/25 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
唐山大地震的观后感
2015/06/05 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Golang获取List列表元素的四种方式
2022/04/20 Golang