使用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下判断是否为闰年的Datetime包
Oct 26 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
AngularJS内置指令
2015/02/04 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python入门篇之列表和元组
2014/10/17 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
采购主管岗位职责
2014/02/01 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电