SyntaxHighlighter 编程代码语法高亮插件

  • Z时代
  • 2024-01-10
  • 分类：IT

在文章中经常要插入很多代码，在文章中的代码看起来不是那么好看，相比于编辑器来讲，就逊色了很多，那么有没有这样一个工具可以实现编程代码的语法高亮，想编辑器那样的语法高亮，SyntaxHighlighter 可以帮您实现。

SyntaxHighlighter 编程代码语法高亮插件

使用方法

解压压缩包，scripts文件夹中包含了各种语言的JS文件，在 styles 文件夹中是各种显示高亮的主题。

1、首先要引入其核心 javascript 文件 shCore.js 和核心CSS文件 shCore.css，这两个是必选要引入的。

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

2、引入你要高亮的语言 JS，比如我想高亮显示的是 C#，那么必须引入在 scripts 文件夹中的 shBrushCSharp.js

<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>

3、最后引入高亮显示的主题 CSS，默认的为 shThemeDefault.css

<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

4、配置您的 SyntaxHighlighter

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();

5、在需要高亮的代码添加 <pre> 标签，并添加 class="brush:c-sharp" 属性，其中 brush 的值也就是你的代码是数据那种编程语言

<pre>
function test():String{
    return 10;
}
</pre>

注意：HTML 代码显示在标签为 <pre></pre> 中，syntaxhighlighter 默认会自动查找 <pre/> 标签，其中标签可自定义，可以是 <div>、<ul >、<ol > 等等，只需要加上如下配置代码：

SyntaxHighlighter.config.tagName = 'div';

同时根椐 Class 类名选择不同的格式刷，由于以 JavaScript 为实例，因此格式刷配置为 javascript，如上 class="brush:javascript"

详细的配置参数：

鼠标移动到代码区域时会显示一个工具条，分别是显示代码，复制代码，打印代码和帮助四个功能，默认为英文，改中文设置如下：

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.config.strings = {
	expandSource : '展开代码',
	viewSource : '查看代码',
	copyToClipboard : '复制代码',
	copyToClipboardConfirmation : '代码复制成功',
	print : '打印',
	help: '?',
	alert: '语法高亮\n\n',
	noBrush: '不能找到刷子: ',
	brushNotHtmlScript: '刷子没有配置html-script选项',
	aboutDialog: '<div></div>'
};
SyntaxHighlighter.all();

项目地址：http://alexgorbatchev.com/SyntaxHighlighter/

以上是 SyntaxHighlighter 编程代码语法高亮插件 的全部内容， 来源链接： utcz.com/p/231854.html

回到顶部