syntaxhighlighter的使用

第一

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

第二

如何使用？首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css，这两个是必选要引入的。其次引入你要高亮的语言JS，比如我想高亮显示的是C#，那么必须引入在scripts文件夹中的shBrushCSharp.js，最后引入高亮显示的主题CSS，默认的为shThemeDefault.css

第三

下面以高亮显示JavaScript代码为例讲解。

引入JS和CSS文件之后还要在页面上写相关代码。

JavaScript代码：

    <script type="text/javascript">

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

        SyntaxHighlighter.all();

    </script>

HTML代码：

1  <pre class=" javascript;">
2 
3     var myCustomFn = function ShowFn() {
4 
5         Ext.Msg.alert('消息框', "你调用了客户端的JavaScript函数");
6 
7     }
8 
9 </pre>

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

SyntaxHighlighter.config.tagName = 'div';

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

第五

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

 1     <script type="text/javascript">
 2 
 3         SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
 4 
 5         SyntaxHighlighter.config.strings = {
 6 
 7             expandSource : '展开代码',
 8 
 9             viewSource : '查看代码',
10 
11             copyToClipboard : '复制代码',
12 
13             copyToClipboardConfirmation : '代码复制成功',
14 
15             print : '打印',
16 
17             help: '?',
18 
19             alert: '语法高亮

',
20 
21             noBrush: '不能找到刷子: ',
22 
23             brushNotHtmlScript: '刷子没有配置html-script选项',
24 
25             aboutDialog: '<div></div>'
26 
27         };
28 
29         SyntaxHighlighter.all();
30 
31     </script>

看下最终效果展示：

最后该插件下载地址： /Files/meiqunfeng/代码高亮插件syntaxhighlighter_2.1.364.zip

syntaxhighlighter的使用

第一

第二

第三

第五