使用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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
php利用事务处理转账问题
2015/04/22 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
深入研究React中setState源码
2017/11/17 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
axios实现文件上传并获取进度
2020/03/25 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
python实现按行切分文本文件的方法
2016/04/18 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
2014国培学习感言
2014/03/05 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
公务员政审材料范文
2014/12/23 职场文书
课外活动实习计划
2015/01/19 职场文书
施工安全保证书
2015/05/09 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
在Python中如何使用yield
2021/06/07 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript