登录 注册

登录

如果要在文章中插入某种编程语言的程序代码,Joomla! 本身自带的 Geshi 触发器显然不能让我们满意。本站曾经撰文介绍了 Geshibot 触发器,是改进了的 Geshi,但是缺乏一项大家都需要的功能:自定义代码的起始行号。

例如:假如你要展示某个 Python 文件中第 17 行至 34 行的代码,那么 Geshibot 展示出来后其起始行号是 1  而不是 17。这就容易误导读者。我曾经给 Geshibot 的作者写信建议他改进这个功能,但是直到现在也没有下文了。

现在,SyntaxHighlighter 触发器/插件却解决了这个问题!与 Geshibot 相比,SyntaxHighlighter 还增加了一个功能,就是“复制到剪切板”功能及“折叠(隐藏)代码展示区域”的功能。本文来简单介绍一下 SyntaxHighlighter 的用法。

 

Code insertion with 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 Code Collapsed

如果读者点击“+ 展开代码”按钮,就能展开整段代码如下:

SyntaxHighlighter C++ Code Example
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

{quickdown:1248}

 

{quickdown:1250}

  1. 评论 (0)

  2. Add Yours

评论 (0)

这里还没有人发表评论

免费下载最新Joomla!核心中文版

扫描此二维码,立即开始下载 Joomla 3 核心中文版

付费下载汉化版扩展

付费后即可下载独家海量

Joomla! CMS 扩展汉化版

了解付费会员制度

点击这里给我发消息

了解 joomlagate.com 网站的付费会员制度