代码高亮syntaxhighlighter

 

下载地址： http://alexgorbatchev.com/SyntaxHighlighter/

 

对于一些程序代码类的网页，常常需要贴出代码，但显示效果往往很难让人满意(不能突出代码)，如必优博客使用的代码高亮都是使用CSS控制输出的，不是真正意义上的代码高亮，只是显示形式类似于代码显示，那如何实现一个代码高亮效果？发现现在很多的代码高亮都需要与服务端交互，使用也比较麻烦。这里介绍一个代码高亮工具syntaxhighlighter语法高亮工具，它不需要与服务器交互，只需要包含相应的格式代码JS包，就可以轻松实现代码高亮，使用非常简单，本文以PHP为实例，谈谈如何使用syntaxhighlighter语法高亮工具优化你的代码显示，让你的代码更加具有吸引力，首先看一下PHP实例的效果图：

查看syntaxhighlighter语法高亮在线演示http://www.biuuu.com/demo/syntaxhighlighter/index.html

第一步，下载syntaxhighlighter语法高亮源码包，当前版本是2.0.320
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

第二步，解压文件包，文件包内容如下：

第三步，如何使用syntaxhighlighter语法高亮工具，以PHP为例

一，包含文件部分

1. <script type="text/javascript" src="scripts/shCore.js"></script>
2. <script type="text/javascript" src="scripts/shBrushCss.js"></script>
3. <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
4. <script type="text/javascript" src="scripts/shBrushPhp.js"></script>

shCore.js是一个核心包，其次分别是shBrushCss.js、shBrushJScript.js和shBrushPhp.js，因为只需要对PHP代码进行高亮，所以其它的语法包没有包含，把有用的JS包包含就行，这样一方面有利于减少代码，另一方面加速网页打开的速度。

其次就是两个核心的CSS样式

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

这二个CSS样式是一定需要的，因为所有的显示控制都在这两个CSS样式文件中。

二，Javascript部分

1. <script type="text/javascript">
2. SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
3. SyntaxHighlighter.all();
4. </script>

这里有一个剪贴板配置，然后调用了一个all()方法，表示调用包含文件中的所用语法包。

三，HTML部分

1. <pre class="brush: php;">
2. //PHP数组高亮显示
3. $webName = array('必优博客');
4. $webUrl = array('http://www.biuuu.com/');
5. $web = array_merge($webName,$webUrl);
6. print_r($web);
7. function goCurrent(){
8. $name = __FILE__;
9. echo $name;
10. }
11. </pre>

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

1. SyntaxHighlighter.config.tagName = 'div';

同时根椐class类名选择不同的格式刷，由于本文以PHP为实例，因此格式刷配置为PHP，如上：class="brush: php;"

如上方法就实现了PHP语法高亮显示，是不是非常简单！

当我们把鼠标移动到代码区域时会显示一个工具条，如下：

分别是显示代码，复制代码，打印代码和帮助四个功能，默认为英文，可以对这个工具条进行设置，如下代码：

1. SyntaxHighlighter.config.strings = {
2. expandSource : '展开代码',
3. viewSource : '查看代码',
4. copyToClipboard : '复制代码',
5. copyToClipboardConfirmation : '代码复制成功',
6. print : '打印',
7. help : '?',
8. alert: '语法高亮/n/n',
9. noBrush : '不能找到刷子: ',
10. brushNotHtmlScript : '刷子没有配置html-script选项',
11. aboutDialog : '<div></div>'
12. }

至于如何显示提示文本，可自定义设置，其中最后一个选项aboutDialog 表示帮助对话框，可自定义配置HTML内容。

其它一此配置大家可以查看shCore.js文件，分别有一个defaults和config选项，可自定义配置其中的选项。

使用syntaxhighlighter语法高亮工具非常简单，轻松优化你的代码高亮显示，试试吧！

查看syntaxhighlighter语法高亮在线演示
http://www.biuuu.com/demo/syntaxhighlighter/index.html

下载syntaxhighlighter语法高亮实例源码包
http://jquerycodes.googlecode.com/files/syntaxhighlighter.rar

原创文章如转载，请注明：转载自 必优博客 http://www.biuuu.com/

本文链接地址：http://www.biuuu.com/p976.html