如何使用语法高亮器为代码添加颜色

最编程 2024-04-23 10:45:59

...

武汉源创会回归，4月20聊聊大模型”

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 。

具体用法：

在代码前根据代码语言的不同加上不同的[%Lang]在代码后加上[/%Lang]，%Lang = 你用的语言对应的Brush aliases（具体对应罗列于下）。例如[@cpp]#include <stdio.h>[/cpp]（@去掉）。
或者只用一次%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>

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

上一篇： jscript 和 javascript 有什么区别？

下一篇： JScript 内置对象 Array 中删除元素的方法_javascript技巧