宁静致远

安装syntaxHighlighter后，发现了一个问题：如果插入的代码段中，含有较长的行，超过了代码块Box的长度。这种情况下，预期它是可以换行的，但实际上在googlechome主题下并未换行，导致超出部分的代码不可见。

通过搜索引擎发现，还是有不少人有相同的问题。于是就折腾了一下：

• SyntaxHighlighter 2.0后，已经支持自动换行了，并可以通过wrap-lines的配置来打开或者关闭。于是尝试将wrap-lines设置为true,依旧不能正常换行，未解决问题。
• 尝试换主题，发现默认主题下，换行是可以正常工作的
• 不同主题会影响到显示效果的，主要是CSS。于是开始怀疑是CSS冲突。 用Firebug分析比较两个主题的CSS，逐渐注意到white-space这一选项。
  • 在googlechrome主题下，经过计算后的white-space值是pre，而默认主题下，计算结果为normal。
  • 再次搜索，在cssmagic的一篇文章中(很清晰明白，推荐阅读)，找到以下表格：

• white-space 属性值一览表 

  属性值	空白符	换行符	自动换行	最早出现于
  normal	合并	忽略	允许	CSS 1
  nowrap	合并	忽略	不允许	CSS 1
  pre	保留	保留	不允许	CSS 1
  pre-wrap	保留	保留	允许	CSS 2.1
  pre-line	合并	保留	允许	CSS 2.1

  • 在Firebug中的CSS中，检查white-space的CSS样式文件，定位到主题的screen.css。

  • 编辑该文件，找到white-space:pre，移除并更新文件，刷新一下，问题解决。

折腾的结论如下：

• 对于定制较高的主题，要注意主题与插件的CSS冲突
• 本文适用的syntaxHighlighter为2.1.364