使用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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js 加载时自动调整图片大小
May 28 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 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
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python之pymysql的使用小结
2019/07/01 Python
python变量命名的7条建议
2019/07/04 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
小学英语教学反思
2014/01/30 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
上班离岗检讨书
2014/09/10 职场文书
施工安全协议书范本
2014/09/26 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL