编程 Javascript

使用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>

使用SyntaxHighlighter实现HTML高亮显示代码的方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ImageZoom 图片放大镜效果（多功能扩展篇）

Apr 14 Javascript

基于jquery的textarea发布框限制文字字数输入(添加中文识别)

Feb 16 Javascript

js中自定义方法实现停留几秒sleep

Jul 11 Javascript

jquery中post方法用法实例

Oct 21 Javascript

教你如何终止JQUERY的$.AJAX请求

Feb 23 Javascript

JS实现简单的tab切换选项卡效果

Sep 21 Javascript

JavaScript实现body内任意节点的自定义属性功能示例

Sep 18 Javascript

通过 JS 判断页面是否有滚动条的实现方法

Apr 05 Javascript

浅谈vue后台管理系统权限控制思考与实践

Dec 19 Javascript

JavaScript获取某一天所在的星期

Sep 05 Javascript

浅谈vue项目用到的mock数据接口的两种方式

Oct 09 Javascript

JavaScript实现网页动态生成表格

Nov 25 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