文档章节

SyntaxHighlighter代码加色使用方法

Junn
 Junn
发布于 2013/08/03 10:22
字数 998
阅读 1323
收藏 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
粉丝 145
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

分布式场景下如何保证消息队列实现最终一致性

考虑一个分布式场景中一个常见的场景:服务A执行某个数据库操作成功后,会发送一条消息到消息队列,现在希望只有数据库操作执行成功才发送这条消息。下面是一些常见的作法: 1. 先执行数据库...

中关村的老男孩
12分钟前
0
0
招银网络面试题、考点、知识点总结(Java岗)

java基础 全是基础不用多说肯定考的多,尤其是招银 OOP特性/java语言特性:封装、继承、多态 多态具体的表现:多态应用举例、如何调用父类方法(super)、重写和重载(重写父类方法的规则、构...

戎码益深
16分钟前
0
0
Mybatis深入源码分析之SQLSession一级缓存原理分析

源码分析图

须臾之余
20分钟前
0
0
成年人社交中的10个潜规则

前阵子我建议大家有空的时候,一定要去看《红楼梦》这本书。 原因就是从这本书,可以学习到很多很多人情世故,人情世故在学校里,老师几乎都不会教,所以我们只能靠自己去学。 只有自己去学了...

ZhangLG
22分钟前
1
0
在PyCharm中使用Pylint

简介 pylint是一个用于检查python代码中的错误,尝试强制执行编码标准的工具。它还可以查找某些类型错误,可以建议如何重构特定块的建议,并可以向您提供有关代码复杂性的详细信息。 官网:w...

哼_哼
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部