使用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 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
koa-passport实现本地验证的方法示例
Feb 20 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遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php二分查找二种实现示例
2014/03/12 PHP
php中stdClass的用法分析
2015/02/27 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
js Function类型
2011/12/04 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
javascript编写简易计算器
2017/05/06 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python中bisect模块用法实例
2014/09/25 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python实现录音小程序
2020/10/26 Python
python修改字典键(key)的方法
2019/08/05 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
车辆安全检查制度
2014/01/12 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
MySQL里面的子查询的基本使用
2021/08/02 MySQL
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS