使用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常用代码段整理
Nov 30 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript中对象介绍
Dec 31 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 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
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
php无限极分类实现方法分析
2019/07/04 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python列表对象实现原理详解
2019/07/01 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python读取csv文件实例解析
2019/12/30 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
运动会广播稿200字
2014/01/15 职场文书
计算机实训报告总结
2014/11/05 职场文书
大雁塔英文导游词
2015/02/10 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电