SyntaxHighlighter使用小结

用了一个上午的时间来研究SyntaxHighlighter,不得不承认,SyntaxHighlighter的确强大而且美观,不仅提供了对大多数编程语言的支持,而且提供了非常多的代码高亮主题以供选择。

不过SyntaxHighlighter对html代码的高亮让人有点闹心。

官方文档说设置 html-script 为true,同时引入 shBrushXml.js 即可设置 html 代码高亮,然后我测试之后发现实际情况并非如此,被高亮的整个代码块根本无法正常显示。

我查看了官方 demo 的html源代码,发现示例中所有 html 标签的左尖括号全部被替换为了[ < ],我如法炮制,发现秘密就在于此,原来 SyntaxHighlighter 需要对 html 标签中左尖括号进行如此替换之后才能正常高亮显示。

从官方的安装文档中也发现对该问题的说明:

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

另外,测试了一下其他的JavaScript版代码高亮工具,发现无法直接高亮html代码是一个普遍问题。

SyntaxHighlighter 安装说明

1、 引入shCore.js 和 shCore.css ;

2、 引入所需要的brushes,比如高亮显示JavaScript需要引入shBrushJScript.js;

3、引入级联样式表文件:shCore.css 和 shThemeDefault.css ;

4、 用<pre>标签标识准备高亮显示的代码段;

5、 调用SyntaxHighlighter.all()方法。

SyntaxHighlighter的引入其实很简单,参照下载文件中的示例可以很快上手。

SyntaxHighlighter 配置说明

SyntaxHighlighter可以通过3种方式进行配置:

SyntaxHighlighter.config
SyntaxHighlighter.config中的配置项的作用范围是被高亮显示的整个代码块,而对于代码块中单行的代码则没有什么意义,以下为具体配置项的说明:

bloggerMode
如果你要高亮的内容位于blogger.com,那么你需要开启这个开关。

默认值:false

strings
该配置项允许你修改默认信息。

默认值:Object

stripBrs
该选项会自动过滤掉被高亮代码块中每行后面自动添加的
标签。

默认值:false

tagName
该配置项允许使用其他标签来标识代码块。

默认值:"pre"

示例:

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

SyntaxHighlighter.defaults
SyntaxHighlighter.defaults中的配置项的应用对象是代码块中的单行代码。

auto-links
是否自动检测代码块中的超链接。关闭该配置型,则代码块中的链接被关闭,无法点击进入。

默认值:true

class-name ''
加入自定义样式。

collapse
代码块是否默认折叠。

默认值:false

first-line
该配置项允许修改起始行的行号。

默认值:1

gutter
该配置项用来设置行号显示与否。

默认值:true

highlight
该配置项用来着重显示某些代码行。可以通过单个数字来着重显示单行,或者传入一个类似 [1, 2, 3] 的数组来着重显示指定的多行。

默认值:null

html-script
开启该配置项可以高亮显示HTML/XML代码,这在WEB开发中非常常见。开启该配置项需要shBrushXml.js的支持,同时你的brush也需要支持该特性。

默认值:false

smart-tabs
该配置项用来开启或关闭 mart tabs 特性。

默认值:true

tab-size
该配置项用来设置代码块中tab键的大小。

默认值:4

toolbar
配置项用来设置工具栏的显示与否。

默认值:true

示例:

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
...
SyntaxHighlighter.all();

Parameters
Parameters仅在当前代码段中生效,我们可以利用Parameters的这个特性为同一页面的不同代码段设置不同的高亮效果。Parameters利用键值对进行设置,这种形式同CSS非常类似。

通过设置Parameters,我们可以修改 SyntaxHighlighter.defaults 中的任意配置项的默认值。

示例:

...

此条目发表在sitebuild分类目录,贴了标签。将固定链接加入收藏夹。

SyntaxHighlighter使用小结》有8条回应

  1. friendshipwei说:

    你好,请教一个问题,就是你在使用syntaxHighLighter插件时,数据库中存储的是经过高亮后生成的带样式的代码吗?还是在数据库中只保存了public class test{}这种代码,然后在输出时,调用JS方法进行着色呢?

  2. friendshipwei说:

    嗯,谢谢啦,另外,你有HTML代码高亮的demo么?能发给我一份吗,谢谢了,我的邮箱是friendship_chenwei@126.com

  3. friendshipwei说:

    我是说高亮HTML的代码哦,高亮C#其他各类代码,我已经测试了,嘿嘿,谢谢了

  4. friendshipwei说:

    请问以下
    设置 html-script 为true

    这是什么意思呢?在哪儿设置呢?

  5. friendshipwei说:

    html-script
    开启该配置项可以高亮显示HTML/XML代码,这在WEB开发中非常常见。开启该配置项需要shBrushXml.js的支持,同时你的brush也需要支持该特性。

    我在你上面找到上一个问题的答案了,现在请教如何让

    开启该配置项需要shBrushXml.js的支持,同时你的brush也需要支持该特性

    这样呢?shBrushXml.js如何支持,brush又该怎么支持呢?
    如果有空,还请你能帮忙解答一下哈,谢谢了~~

  6. nihao说:

    你好,我想问一下,我的代码中有必须有空行,但显示的时候一段代码被分成两份,该怎么解决啊?谢谢了!我想让它变成一个整体!

  7. 朱中标说:

    在现实HTML代码的时候可以使用xml来代替html-script:true 我是这样做的

回复 friendshipwei 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据