使用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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
js 图片等比例缩放代码
May 13 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
Node.js引入UIBootstrap的方法示例
May 11 Javascript
JavaScript实现通讯录功能
Dec 27 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 SPL标准库中的常用函数介绍
2015/05/11 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
原生JS实现留言板
2020/03/26 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
python导入pandas具体步骤方法
2019/06/23 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python 8种必备的gui库
2020/08/27 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
工地安全检查制度
2014/02/04 职场文书
元旦联欢会主持词
2014/03/26 职场文书
写给医院的感谢信
2015/01/22 职场文书
匿名信格式范文
2015/05/27 职场文书
学校运动会通讯稿
2015/07/18 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python