使用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 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
js时间控件只显示年月
Jan 08 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
js实现复制粘贴的两种方法
Dec 04 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
Angular排序实例详解
2017/06/28 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
js实现数字滚动特效
2019/12/16 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python之pymysql的使用小结
2019/07/01 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
同学会主持词
2014/03/18 职场文书
世博会口号
2014/06/20 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
教师师德工作总结2015
2015/07/22 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python