文章分类阅读
会员登录
最新评论
- 好好!一定要试试看的,其实我一 直很期待joomla整合dis cuz X1的!
作者: ultramankiki - 继承和传承,中国人喜欢,没想到 老外也喜欢。传承没有理由。我们 就当是joomla传承MAMB O,...
作者: ljoooooooo - 怎样去除Portfolio Design 的链接啊
作者: 11025 - 下载链接出错了,不能下载哦
作者: shrine - Content static静态化之后,页面上 的图片保存的是相对路径,再次浏 览的时候,就无法找到...
作者: babyfish
| 用 syntaxhighlighter 插件在文章中插入程序源代码 | ![]() |
| 作者:白建鹏 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2007-12-22 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
如果要在文章中插入某种编程语言的程序代码,Joomla! 本身自带的 Geshi 触发器显然不能让我们满意。本站曾经撰文介绍了 Geshibot 触发器,是改进了的 Geshi,但是缺乏一项大家都需要的功能:自定义代码的起始行号。 例如:假如你要展示某个 Python 文件中第 17 行至 34 行的代码,那么 Geshibot 展示出来后其起始行号是 1 而不是 17。这就容易误导读者。我曾经给 Geshibot 的作者写信建议他改进这个功能,但是直到现在也没有下文了。 现在,SyntaxHighlighter 触发器/插件却解决了这个问题!与 Geshibot 相比,SyntaxHighlighter 还增加了一个功能,就是“复制到剪切板”功能及“折叠(隐藏)代码展示区域”的功能。本文来简单介绍一下 SyntaxHighlighter 的用法。
从上图中可以看出,这段展示的代码起始行号为 10,并且代码区域顶部有“复制到剪切板”的按钮,点击之后就复制了这段代码。顶部第二行的 10 20 30 40 这些数字,表示的是“列号”(Column number),相当于 Word 中的“标尺”,能够提供“该字符位于第几列”的参考。“打印”按钮点击后就仅仅打印代码区域,可以说为分享这段代码提供了又一种选择。另外,代码区域底部还有横向滚动条,这提示:如果某行代码的长度超过了网页中 mainbody 区域的宽度,会自动增加滚动条以方便查看,而不会撑破版面布局。
当然了,展示区域对代码进行高亮显示(Highlight)已经是最基本的功能了。 在安装 SyntaxHighlighter 时我注意到,作者并未提供使用说明。但是他提到,本触发器是基于 alex.gorbatchev 开发的 SyntaxHighlighter Javascript 脚本而制作的。因此,我访问了 SyntaxHighlighter 脚本的官方网站,找到了使用说明。下面简单说明一下:
SyntaxHighlighter 基本用法只要在文章中用 <pre> </pre> 这个标记将所要展示的代码包围即可。这也是所有代码引用触发器的共同特点。 不过,在 <pre> 标记中,必须增加一点内容才能使 SyntaxHighlighter 生效。语法是:
结束标记 </pre> 不需要任何参数。 那么,上面用法中的“语言”和“参数”分别指哪些?
SyntaxHighlighter 支持的程序语言目前,SyntaxHighlighter 支持多达 12 种编程语言。它们是:
SyntaxHighlighter 参数SyntaxHighlighter 支持以下参数:
从前面的基本用法中已经看到,“语言”与“参数”之间有一个英文冒号。如果要增加多个参数,那么每一个参数前面都要有一个英文冒号。 例如,我们要展示一段来自 C++ 程序文件的代码,起始行号为 169,要显示标尺,同时以折叠隐藏方式展示。那么,其使用方法就是:
在前台的效果就是: 如果读者点击“+ 展开代码”按钮,就能展开整段代码如下: 另外,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 J1.5 程序源代码展示插件 2.0.1 多国语言版