使用SyntaxHighlighter着色，使代码高亮_网页特效

使用SyntaxHighlighter着色，使代码高亮

何问起 hovertree.com

本文网址：hovertree.com/h/bjaf/8m6o9n4n.htm
发表评论

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的js插件。

查看效果

效果2

使用方法：

首先引用js文件：
<script type="text/javascript" src="http://hovertree.com/texiao/js/29/syntaxhighlighter/scripts/shCore.js"></script>

然后引用对应语言的格式js文件，例如js格式：
<script type="text/javascript" src="http://hovertree.com/texiao/js/29/syntaxhighlighter/scripts/shBrushJScript.js"></script>

C#格式的为：
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>

然引入样式：
<link type="text/css" rel="stylesheet" href="http://hovertree.com/texiao/js/29/syntaxhighlighter/styles/shCoreDefault.css" />

然后写一句代码：
<script type="text/javascript">SyntaxHighlighter.all();</script>

然后是要着色的代码框架：
<pre class="brush: js;">

</pre>

把要着色的代码放在框架里，
其中 brush:js 表示放在中间的是js代码
如果是c#代码则为：brush:csharp

js的例子如下：

<pre class="brush: js;">
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
document.write("何问起年月日："+year+" "+month+" "+date);
</pre>

这样就实现的第一个效果了。查看效果
完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>使用SyntaxHighlighter着色，使代码高亮_何问起</title><base target="_blank" />
<script type="text/javascript" src="http://hovertree.com/texiao/js/29/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/js/29/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="http://hovertree.com/texiao/js/29/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">SyntaxHighlighter.all();</script>
<style>.hovertreeinfo{
max-width:800px;
}.hovertreeinfo a{color:blue}</style>
</head>
<body style="background: white; font-family: Helvetica">
<h1>使用SyntaxHighlighter着色，使代码高亮</h1>
下面是JavaScript代码
<div class="hovertreeinfo">
<pre class="brush: js;">
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
document.write("何问起年月日："+year+" "+month+" "+date);
</pre>
<a href="http://hovertree.com">首页</a>
<a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/h/bjaf/8m6o9n4n.htm">代码说明</a>
</div>
</body>
</html>

各种语言的名称和文件如下：

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

代码托管：https://github.com/syntaxhighlighter/syntaxhighlighter

评论：