使用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通过Ajax提交表单并返回结果
Jul 31 Javascript
详解js闭包
Sep 02 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
React组件refs的使用详解
Feb 09 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python适合做数据挖掘吗
2020/06/16 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
高中生校园生活自我评价
2013/09/19 职场文书
全陪导游欢迎词
2014/01/17 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
学校食堂管理制度
2015/08/04 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js