文档章节

SyntaxHighlighter代码加色使用方法

shaohan
 shaohan
发布于 2014/04/08 13:51
字数 1028
阅读 4525
收藏 2

SyntaxHighlighter是一款用于web页面的代码高亮着色工具,可以用来着色多种语言,能让你的代码在网页上以类似IDE编辑器里的样子高亮关键字,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI,当时还属于自由软件,最近打开官方网站发现已被goolge收编。 

官网: http://about.me/alexgorbatchev 
下载地址: http://alexgorbatchev.com/SyntaxHighlighter/ 
或 http://code.google.com/p/syntaxhighlighter/ 
演示地址: http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/ 

它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML 。 

具体用法:

  1. 在代码前根据代码语言的不同加上不同的[%Lang]在代码后加上[/%Lang],%Lang = 你用的语言对应的Brush aliases(具体对应罗列于下)。例如[@cpp]#include <stdio.h>[/cpp](@去掉)。

  2. 或者只用一次%Lang,[@code lang=%Lang]你的代码[/code]或者[@source lang=%Lang]你的代码[@source lang=%Lang],其中lang都可以换成language。

点击Brush name 有官方网站的详细介绍和Demo,有兴趣的童鞋可以去看看。对于技术类的博客来说,这种语法高亮插件是必不可少的。

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js


该工具核心基于javascript,使用起来很简单: 

1、假设网页文件test.htm存放在一个目录,将dp.SyntaxHighlighter解压缩,并复制其中的Scripts文件夹和styles文件夹,确保和test.html在同一个目录下面。 
2、在网页的<head></head>之间插入以下代码: 
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> 
3、在网页要显示程序源代码的地方插入以下代码,若是HTML类型的话,用XML(其它的如class="js"表示以js语法显示源代码,其他可设定的class值分别为c#、css、c、elphi、java、js、php、python、ruby、sql、vb、xml): 
<textarea name="code" rows="15" cols="100"> 
程序源代码放在这儿 
</textarea> 
说明: 
name="code"是必须的,不能更改; 
class="xml"是着色的方式,即需要着色的代码的类型,根据需要进行更改。 
4、在网页尾部的</body>之前插入以下代码: 

01 <script class="javascript" src="Scripts/shCore.js"></script>
02 <script class="javascript" src="Scripts/shBrushCSharp.js"></script>
03 <script class="javascript" src="Scripts/shBrushPhp.js"></script>
04 <script class="javascript" src="Scripts/shBrushJScript.js"></script>
05 <script class="javascript" src="Scripts/shBrushJava.js"></script>
06 <script class="javascript" src="Scripts/shBrushVb.js"></script>
07 <script class="javascript" src="Scripts/shBrushSql.js"></script>
08 <script class="javascript" src="Scripts/shBrushXml.js"></script>
09 <script class="javascript" src="Scripts/shBrushDelphi.js"></script>
10 <script class="javascript" src="Scripts/shBrushPython.js"></script>
11 <script class="javascript" src="Scripts/shBrushRuby.js"></script>
12 <script class="javascript" src="Scripts/shBrushCss.js"></script>
13 <script class="javascript" src="Scripts/shBrushCpp.js"></script>
14 <script class="javascript">
15 dp.SyntaxHighlighter.HighlightAll('code');
16 </script>

一个页面里面可以包含任意多个需要着色的代码段; 
压缩包中有各种着色代码类型的着色案例,大家可以参照使用。 

1. 首先在页面上添加如下代码(假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面,注意目录结构): 

<script language="javascript"> </script> 

官方的安装中没有window.onload,我想这个还是需要的,毕竟,页面加载的时候我就需要给代码着色。 

01 <link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
02 <script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
03 <script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
04 <script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
05 <script language="javascript">
06 window.onload = function () {
07 dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
08 dp.SyntaxHighlighter.HighlightAll('code');
09 }
10 </script>

2. 使用方法如下: 

方法一:使用pre 

1 <pre name="code" class="c-sharp">
2 ... some code here ...
3 </pre>

方法二:使用textarea 

1 <textarea name="code" class="c#" cols="60" rows="10">
2 ... some code here ...
3 </textarea>

另外,这里还有一些高级特性的设置方法可供参考,诸如代码折叠等。


本文转载自:

shaohan
粉丝 10
博文 97
码字总数 57889
作品 0
海淀
项目经理
私信 提问
SyntaxHighlighter代码加色使用方法

SyntaxHighlighter是一款用于web页面的代码高亮着色工具,可以用来着色多种语言,能让你的代码在网页上以类似IDE编辑器里的样子高亮关键字,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程...

Junn
2013/08/03
0
0
kindeditor4.x整合SyntaxHighlighter代码高亮

kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,不过因为SyntaxHighlighter的应用...

度外网络
2012/08/26
0
4
SyntaxHighlighter 获得 DbNetLink 的赞助

SyntaxHighlighter (原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库。格式化效果如下图所示: 这也是本站所使用的语法着色库,实际使用效果请看...

红薯
2010/10/29
1K
7
WordPress官方推荐的代码高亮插件

今天花了大半天的时间,终于选择好自己心仪的wordpress代码高亮插件,同时它也是wordpress官方推荐的代码语法高亮插件。在选择的过程中,我对比和试用了若干个代码高亮wordpress插件,包括有...

Surjur
2015/04/30
0
1
syntaxhighlighter怎么动态加载代码?

昨天开始研究Kindeditor跟syntaxhighlighter的集成使用,直到目前为止,未能成功,望高手帮忙解决下,先谢了。 这样的,看到开源中国用了kindeditor编辑器,并且集成了syntaxhighlighter代码...

Photon
2010/12/16
1K
7

没有更多内容

加载失败,请刷新页面

加载更多

protoc 编译工具

在进行开发 protoc 之前,你需要首先在你的计算机中安装 protoc 编译工具。 下载编译工具 进入 Protocol Buffers 的源代码中然后选择发布的版本中,找到对应的版本。项目的链接地址为:https...

honeymoose
今天
1
0
uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

1.准备文件 自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件: bootstrap.min.css ...

panyunxing
今天
10
0
Android Camera原理之camera service类与接口关系

camera service主要是指 frameworks/av/services/camera/下面的代码,最近在看这一块的代码,为了更好地理清这一块的代码,也为了后续学习camera方便一些,我觉得很有必要理一下这一块的整体...

天王盖地虎626
今天
2
0
Golang学习笔记

[TOC] Golang学习笔记 这个学习笔记是最早在1.初,版本左右的时候写的,和当前最新的版本可能会有较大的差异. 因为成文比较早,文章里面又有很多自己的见解,有些东西当时理解的不太透彻可能写错...

我爱吃炒鸡
今天
14
0
科技赋能成效显著!金融壹账通两大赋能项目荣获IDC大奖

7月19日,2019IDC中国未来金融论坛曁颁奖典礼于北京举办。由金融壹账通赋能的长春农商银行多人视频面审智能风控系统、包头农商银行互联网银行SaaS服务两大项目因在项目的创新性、技术领先性、...

IFTNews
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部