编程 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 相关文章推荐

Jquery replace 字符替换实现代码

Dec 02 Javascript

使用JS进行目录上传（相当于批量上传）

Dec 05 Javascript

自制基于jQuery的智能提示插件一枚

Feb 18 Javascript

jquery数组过滤筛选方法grep()简介

Jun 06 Javascript

AngularJS初始化静态模板详解

Jan 14 Javascript

jQuery实现TAB选项卡切换特效简单演示

Mar 04 Javascript

利用Three.js如何实现阴影效果实例代码

Sep 26 Javascript

vue跨域解决方法

Oct 15 Javascript

ES6的Fetch异步请求的实现方法

Dec 07 Javascript

创建nuxt.js项目流程图解

Mar 13 Javascript

JS实现密码框效果

Sep 10 Javascript

vue.js封装switch开关组件的操作

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