网页中代码高亮插件SyntaxHighlighter

最新推荐文章于 2025-05-17 13:25:32 发布

YanniZhang的博客

最新推荐文章于 2025-05-17 13:25:32 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：代码高亮 SyntaxHighlight

本文链接：https://blog.csdn.net/jenyzhang/article/details/48493231

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了网页代码高亮插件SyntaxHighlighter，支持多种编程语言，包括C#、CSS、JavaScript等。提供了插件下载、相关博文和GitHub地址。使用方法包括引入核心文件和语言js，设置html及JavaScript代码。此外，还可扩展自定义标签和配置默认设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介：

syntaxhighlighter是一个小开源项目，它可以在网页中对各种程序源代码语法进行加亮显示。

支持当前流行的各种编程语言：

C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML

二、相关链接

1.插件下载地址：http://alexgorbatchev.com/SyntaxHighlighter/download/

2.相关博文：http://blog.csdn.net/zk437092645/article/details/8641495

http://www.cnblogs.com/meiqunfeng/archive/2009/11/24/1609238.html

3.github地址:https://github.com/syntaxhighlighter/syntaxhighlighter

三、使用方法

1.引入核心js和css。

（1）shCore.js和shCore.css这两个是必须引入。

（2）引入你要高亮的语言对应的js。如高亮js，则引入shBrushJScript.js

（3）引入高亮显示的主题CSS,默认为shThemeDefault.css

        <script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>

2.添加html代码

syntaxhighlighter默认自动查找<pre></pre>标签，同时根据class类名选择不同的格式刷。

如：以js语言为例：

<pre class="brush: js;">
function helloSyntaxHighlighter()
{
<span style="white-space:pre">	</span>return "hi!";
}
</pre>

3.添加JavaScript代码

     <script type="text/javascript">SyntaxHighlighter.all();</script>

完整的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Hello SyntaxHighlighter</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
	<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>

<body style="background: white; font-family: Helvetica">

<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
	return "hi!";
}
</pre>

</html>

效果图：

三、扩展

1.html 代显示在标签<pre></pre>中，syntaxhighlighter默认自动查找<pre>标签，也可以自定义标签，只需在javascript代码中加上配置代码：

如：高亮<div></div>中的内容

        SyntaxHighlighter.config.tagName = 'div';

2.工具条的添加（3.0.83似乎不支持，请下2.1.364版本）。（http://files.cnblogs.com/meiqunfeng/%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE%E6%8F%92%E4%BB%B6syntaxhighlighter_2.1.364.zip）

 SyntaxHighlighter.config.clipboardSwf = 'script/clipboard.swf';

效果：

3.更改默认配置

参考链接：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/