SyntaxHighlighter的用法

摘要 首先需要载入样式，脚本。如果是基于jQuery的，要载入jQuery。然后选择刷子载入，刷子支持PHP、JS、xml等等 然后载入样式文件。样式很多挑一个就行了。下面是一个示例代码，3.0开始，你可以用拖动鼠标，或者双击代码区来选择复制代码，所以就没有工具条存在

首先需要载入样式，脚本。如果是基于jQuery的，要载入jQuery。然后选择刷子载入，刷子支持PHP、JS、xml等等

然后载入样式文件。样式很多挑一个就行了。下面是一个示例代码，3.0开始，你可以用拖动鼠标，或者双击代码区来选择复制代码，所以就没有工具条存在的必要了。

 
 
 
 
SyntaxHighlighter.all();

function helloSyntaxHighlighter() { return "SyntaxHighlighter 3.0.83 配置"; }

上面是一个简单的配置，写在

标签的CLASS中，当然也可以使用

SyntaxHighlighter.config.配置名 = ‘’
SyntaxHighlighter.defaults[``'gutter'``] = ''
这样的方法配置，不过必须在调用 SyntaxHighlighter.all() 之前。
下面是抄来的配置列表，源码中也有解析。
1、下面这些配置使用SyntaxHighlighter.config.配置名 = ‘’ 的方式配置
配置名
值
描述
bloggerMode
bool(false)
博客整合模式？不理解，没有用过
strings
object
允许用户自定义系统消息，比如出错，复制到剪切板等，很多只在2.×系列版本中有效
expandSource
help
alert
noBrush
brushNotHtmlScript
viewSource 2.x
copyToClipboard 2.x
copyToClipboardConfirmation 2.x
print 2.x
 
配置方法
SyntaxHighlighter.config.strings.noBrush= "你是不是忘了拿刷子了？";
stripBrs
bool(false)
如果你的编辑软件为每一行的结束自动加上<br>标签,这个选项允许你忽略它们
tagName
‘pre’
没事别动吧。换一个标签，还是用pre比较好
2、还有一些配置可以使用js也可以在标签中配置
下面这些配置使用**SyntaxHighlighter.defaults['gutter'``] = ''**的方式配置
auto-links
bool(true)
如果此项开启，代码中的超链接文字将被a标签套上，也就可以点击了。
class-name
‘’
为代码块加上自定义样式类，比如加上border ，写到这，我发现这是个好主意，我也加：）
collapse
bool(false)
在页面刚加载时，代码被折叠起来，如果代码篇幅较大，可以考虑考虑
first-line
1
行号从这个设置值开始，一般都是1
gutter
true
是否显示行号
highlight
null
标记重要的行，让他们高亮
html-script
bool(false)
如果你是个前端开发人员一定很喜欢这个，它能混合高亮HMLT 和 script脚本，但是你必须载入 xml 的笔刷shBrushXml.js
smart-tabs
bool(false)
姑且先叫它智能缩进好了。有时候开启确保你的代码格式保持原貌，毕竟通过网页显示后缩进有些变形
tab-size
4
自定义tab宽度
toolbar
bool(true)
对 3.0版本来说，这个选项关掉就是了，没啥用
小例子：关闭行号显示
SyntaxHighlighter.defaults['gutter'``] = false;
SyntaxHighlighter.all();
IE 6 ,7 及IE8混杂模式BUG
IE的工程师总是给人“惊喜”，老毛病了，不多说。
1、当代码在一开始处于折叠状态时，代码折叠的字样飞到右边去了，而且会挡住下面的一些东西，方法很简单，在样式文件中找到
.syntaxhighlighter .toolbar 和
.syntaxhighlighter.collapsed .toolbar ，
将顺序按照 我上面写的方式放置，自然就解决了。主要是里面的两个position需要覆盖。IE听从靠后面的，FF听从子选择深的。。。
另一个BUG就是双击代码复制的问题，IE下代码会挤到上面去，虽然没啥影响，但是很不舒服。
找到如下样式，改为一样即可，主要是去掉最后两行
.syntaxhighlighter table td.code .container textarea {

box-sizing: border-box !important;

position: absolute !important;

left: 0 !important;

top: 0 !important;

width: 100% !important;

height: 100% !important;

border: none !important;

background: white !important;

padding-left: 1em !important;

}
重要提示：代码块的外框样式中有个 width:100% !important 有时会超出文本边界，可以通过class-name另外定义样式覆盖它