使用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实现文本框中焦点在最后位置
Mar 04 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Js apply方法详解
2017/02/16 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
npm qs模块使用详解
2020/02/07 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技