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