代码高亮插件SyntaxHighlighter

最新推荐文章于 2025-10-25 00:52:12 发布

原创最新推荐文章于 2025-10-25 00:52:12 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #插件

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了SyntaxHighlighter，一款基于JavaScript的代码高亮插件，支持多种编程语言的语法高亮，包括自定义主题和笔刷文件。通过示例展示了如何在网页中使用该插件进行代码高亮。

插件介绍

SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件。

SyntaxHighlighter 可以对大部分编程语言进行着色渲染，而且代码高亮的性能也非常不错。

SyntaxHighlighter 还可以自定义主题文件。

示例文件下载

官方网站

简单使用

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>代码高亮显示Dmeo</title>
		<link rel="stylesheet" type="text/css" href="css/shCore.css" />
		<script type="text/javascript" src="js/shCore.js"></script>
		<link rel="stylesheet" type="text/css" href="css/shCoreDefault.css" />
		<script type="text/javascript" src="js/shBrushJava.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			SyntaxHighlighter.all();
		</script>
		<pre class="brush:java;">
			System.out.println("Hello World!");
			System.out.println("Hello World!");
			System.out.println("Hello World!");
		</pre>
	</body>
</html>

效果展示：

代码说明：

其他语言

这里为例子的是sql语言。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>代码高亮显示Dmeo</title>
		<link rel="stylesheet" type="text/css" href="css/shCore.css" />
		<script type="text/javascript" src="js/shCore.js"></script>
		<link rel="stylesheet" type="text/css" href="css/shCoreDefault.css" />
		<script type="text/javascript" src="js/shBrushSql.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			SyntaxHighlighter.all();
		</script>
		<pre class="brush:sql;">
			select * from users;
		</pre>
	</body>
</html>

效果图如下：

代码说明：

更换主题

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>代码高亮显示Dmeo</title>
		<link rel="stylesheet" type="text/css" href="css/shCore.css" />
		<script type="text/javascript" src="js/shCore.js"></script>
		<link rel="stylesheet" type="text/css" href="css/shCoreFadeToGrey.css" />
		<script type="text/javascript" src="js/shBrushSql.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			SyntaxHighlighter.all();
		</script>
		<pre class="brush:sql;">
			select * from users;
		</pre>
	</body>
</html>

效果如下：

代码说明：

笔刷

SyntaxHighlighter使用称为笔刷的单独语法文件来定义其突出显示功能。

即可导入不同的语言语法文件。

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

CSS主题

SyntaxHighlighter 2.0引入了自定义CSS主题。这意味着只需切换一个CSS文件，您就可以完全更改突出显示的语法的外观。SyntaxHighlighter包含少量流行的色彩主题，您可以轻松制作自己的主题。

Name	File
Default	`shThemeDefault.css`
Django	`shThemeDjango.css`
Eclipse	`shThemeEclipse.css`
Emacs	`shThemeEmacs.css`
Fade To Grey	`shThemeFadeToGrey.css`
Midnight	`shThemeMidnight.css`
RDark	`shThemeRDark.css`