文档章节

SyntaxHighlighter代码加色使用方法

Junn
 Junn
发布于 2013/08/03 10:22
字数 998
阅读 1361
收藏 7
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" class="js" rows="15" cols="100">
程序源代码放在这儿
</textarea>
说明:
name="code"是必须的,不能更改;
class="xml"是着色的方式,即需要着色的代码的类型,根据需要进行更改。
4、在网页尾部的</body>之前插入以下代码:
<script class="javascript" src="Scripts/shCore.js"></script> 
<script class="javascript" src="Scripts/shBrushCSharp.js"></script> 
<script class="javascript" src="Scripts/shBrushPhp.js"></script> 
<script class="javascript" src="Scripts/shBrushJScript.js"></script> 
<script class="javascript" src="Scripts/shBrushJava.js"></script> 
<script class="javascript" src="Scripts/shBrushVb.js"></script> 
<script class="javascript" src="Scripts/shBrushSql.js"></script> 
<script class="javascript" src="Scripts/shBrushXml.js"></script> 
<script class="javascript" src="Scripts/shBrushDelphi.js"></script> 
<script class="javascript" src="Scripts/shBrushPython.js"></script> 
<script class="javascript" src="Scripts/shBrushRuby.js"></script> 
<script class="javascript" src="Scripts/shBrushCss.js"></script> 
<script class="javascript" src="Scripts/shBrushCpp.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
一个页面里面可以包含任意多个需要着色的代码段;
压缩包中有各种着色代码类型的着色案例,大家可以参照使用。

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

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

官方的安装中没有window.onload,我想这个还是需要的,毕竟,页面加载的时候我就需要给代码着色。
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>
2. 使用方法如下:

方法一:使用pre
<pre name="code" class="c-sharp">
... some code here ...
</pre>
方法二:使用textarea
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>
另外,这里还有一些高级特性的设置方法可供参考,诸如代码折叠等。

© 著作权归作者所有

Junn
粉丝 144
博文 412
码字总数 288918
作品 0
海淀
技术主管
私信 提问
SyntaxHighlighter代码加色使用方法

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

shaohan
2014/04/08
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

没有更多内容

加载失败,请刷新页面

加载更多

远程拷贝命令scp

命令scp 用途: secure copy,利用ssl安全复制(远程文件复制程序) 语法: ]# scp [选项] [用户名@ip]源文件 [用户@ip]目标文件 选项: -P port 指定远程主机的ssh端口 ...

迷失De挣扎
46分钟前
3
0
HTTP

作者:蛙课网 链接:https://zhuanlan.zhihu.com/p/70949908 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 HTTP协议简介 HTTP(超文本传输协议)是应用...

元歌
今天
2
0
总结使用tslint的一些代码规范

1.冒号后面,逗号后面要有空格,还有一般if语句大括号前面后面也都要有空格 2.使用for (let i = 0; i < arr.length; i++) {}循环数组报错,使用for (const i of arr) {} for (const i of arr...

大换子
今天
2
0
虚函数

虚函数作用: 基类中可以调用继承类中的函数。(相当于就是允许子类覆盖父类中的函数)

colin_86
今天
2
0
DisplayPort 迎来重大更新,数据带宽性能提高3倍

VESA宣布了他们对DisplayPort接口三年来的第一次重大更新。 与DP 1.4a相比,DisplayPort 2.0提供了三倍于DP 1.4a的数据带宽性能,支持超过8K的分辨率,更高的刷新率和更高分辨率的HDR,以及其...

linux-tao
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部