使用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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
js数组常用最重要的方法
Feb 04 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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中http_build_query 的一个问题
2012/03/25 PHP
php批量上传的实现代码
2013/06/09 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python实现从URL地址提取文件名的方法
2015/05/15 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python中count函数简单用法
2020/01/05 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
2014年国庆标语
2014/06/30 职场文书
主持人大赛开场白
2015/05/29 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技