|
如果要在文章中插入某种编程语言的程序代码，Joomla! 本身自带的 Geshi 触发器显然不能让我们满意。本站曾经撰文介绍了 Geshibot 触发器，是改进了的 Geshi，但是缺乏一项大家都需要的功能：自定义代码的起始行号。
例如：假如你要展示某个 Python 文件中第 17 行至 34 行的代码，那么 Geshibot 展示出来后其起始行号是 1 而不是 17。这就容易误导读者。我曾经给 Geshibot 的作者写信建议他改进这个功能，但是直到现在也没有下文了。
现在，SyntaxHighlighter 触发器/插件却解决了这个问题！与 Geshibot 相比，SyntaxHighlighter 还增加了一个功能，就是“复制到剪切板”功能及“折叠（隐藏）代码展示区域”的功能。本文来简单介绍一下 SyntaxHighlighter 的用法。
 |
| Code insertion with syntaxhighlighter |
从上图中可以看出，这段展示的代码起始行号为 10，并且代码区域顶部有“复制到剪切板”的按钮，点击之后就复制了这段代码。顶部第二行的 10 20 30 40 这些数字，表示的是“列号”（Column number），相当于 Word 中的“标尺”，能够提供“该字符位于第几列”的参考。“打印”按钮点击后就仅仅打印代码区域，可以说为分享这段代码提供了又一种选择。另外，代码区域底部还有横向滚动条，这提示：如果某行代码的长度超过了网页中 mainbody 区域的宽度，会自动增加滚动条以方便查看，而不会撑破版面布局。
当然了，展示区域对代码进行高亮显示（Highlight）已经是最基本的功能了。
在安装 SyntaxHighlighter 时我注意到，作者并未提供使用说明。但是他提到，本触发器是基于 alex.gorbatchev 开发的 SyntaxHighlighter Javascript 脚本而制作的。因此，我访问了 SyntaxHighlighter 脚本的官方网站，找到了使用说明。下面简单说明一下：
SyntaxHighlighter 基本用法
只要在文章中用 <pre> </pre> 这个标记将所要展示的代码包围即可。这也是所有代码引用触发器的共同特点。
不过，在 <pre> 标记中，必须增加一点内容才能使 SyntaxHighlighter 生效。语法是：
|
<pre name="code" class="语言:参数">
…… 你的代码 ……
</pre> |
结束标记 </pre> 不需要任何参数。
那么，上面用法中的“语言”和“参数”分别指哪些？
SyntaxHighlighter 支持的程序语言
目前，SyntaxHighlighter 支持多达 12 种编程语言。它们是：
|
撰写文章时的参数名称 |
所代表的编程语言 |
|
cpp, c, c++ |
C++ |
|
c#, c-sharp, csharp |
C# |
|
css |
CSS |
| delphi, pascal |
Delphi |
|
java |
Java |
| js, jscript, javascript |
Java Script |
|
php |
PHP |
| py, python |
Python |
| rb, ruby, rails, ror |
Ruby |
|
sql |
Sql |
|
vb, vb.net |
VB |
|
xml, html, xhtml, xslt |
XML/HTML |
SyntaxHighlighter 参数
SyntaxHighlighter 支持以下参数：
|
参数代码 |
参数含义 |
|
nogutter |
隐藏行号 |
| nocontrols |
隐藏顶部控制按钮 |
|
collapse |
以折叠隐藏形式展示 |
|
firstline[value] |
起始行号，默认为 1 |
|
showcolumns |
显示标尺 |
从前面的基本用法中已经看到，“语言”与“参数”之间有一个英文冒号。如果要增加多个参数，那么每一个参数前面都要有一个英文冒号。
例如，我们要展示一段来自 C++ 程序文件的代码，起始行号为 169，要显示标尺，同时以折叠隐藏方式展示。那么，其使用方法就是：
|
<pre name="code" class="cpp:showcolumns:firstline[169]:collapse">
…… 代码 …… 代码 ……
</pre> |
在前台的效果就是：
 |
| SyntaxHighlighter Code Collapsed |
如果读者点击“+ 展开代码”按钮，就能展开整段代码如下：
 |
| SyntaxHighlighter C++ Code Example |
另外，SyntaxHighlighter 还自带了 CSS 文件，便于用户进行一些自定义。例如，你可能希望展示代码的区域带有金黄色背景；或者你希望代码区域的英文使用特殊的字体等等。
SyntaxHighlighter 同时发布了两个版本，分别针对 Joomla! 1.5 和 Joomla! 1.0.x。经过测试，两个版本都能在各自平台上正常运行。因此，建议需要经常在文章中插入程序代码的用户选择 SyntaxHighlighter 。
SyntaxHighlighter 不能使用？
今天早上刚发表了本文的前面内容，下午就看到论坛里有人提问这个问题。我才恍然大悟：有一点虽然与 SyntaxHighlighter 无关，但是我却忘记提醒了。那就是 —— 请注意你的 wysiwyg 编辑器！
大多数“所见即所得”编辑器，包括 Joomla! 自带的 wysiwyg 编辑器 TinyMCE，都有一个功能比较糟糕，就是很难插入 HTML 代码。如果你直接在 wysiwyg 状态下插入 SyntaxHighlighter 的语法，那么前台展示的结果就是代码本身，而不是执行 SyntaxHighlighter 触发器命令的结果。
我曾经点击 TinyMCE 编辑器上面的 HTML 按钮，试图通过这个标准的渠道来插入 SyntaxHighlighter 用法代码，但是仍然不能成功。
解决方法：
先把文章的其他部分编辑好，然后保存；回到“全站设置”，将编辑器选择为“No WYSIWYG Editor”，保存设置；再回到刚才的文章，现在看到满篇的 HTML 源代码（不过我想熟悉 HTML 的人不会被吓倒），找到需要插入 SyntaxHighlighter 语句的地方，将代码插入，然后保存文章，再刷新前台就看到效果了。
如果你觉得这种方法太辛苦，我建议你不要用 TinyMCE 编辑器了。换一个可以轻松插入 HTML 源代码的编辑器，如 JoomlaFCK2 或者更好的 wysiwygpro 。
|
|
| 文件标题: |
Joomler! SyntaxHighlighter for Joomla! 1.5 程序源代码展示插件 v2.1 多国语言版 (详情) |
| 文件类型: |
zip |
| 版本: |
2.1 |
| 文件大小: |
98 Kb |
| 下载次数: |
217 | |
|
|
| 文件标题: |
Flexheader3 for Joomla! 1.6 自动按页分配不同页头图像的模块 v1.3.6 多国语言版 (详情) |
| 文件类型: |
zip |
| 版本: |
1.3.6 |
| 文件大小: |
57 Kb |
| 下载次数: |
31 | | | 
