SyntaxHighlighter自动换行？

Question

我在前面的网页中使用了syntaxhighlighter来突出显示代码。但我遇到一个问题，当代码长度超过<div>的长度时，代码中的单词不会被包装。

然后我用谷歌搜索了它。并找到了下面提到的方法：

pre,code{ 
white-space:pre-wrap;/*css-3*/ 
white-space:-moz-pre-wrap;/*Mozilla,since1999*/ 
white-space:-pre-wrap;/*Opera4-6*/ 
white-space:-o-pre-wrap;/*Opera7*/ 
word-wrap:break-word;/*InternetExplorer5.5+*/　　
} 

然而，出现了一个新问题，行号与实际代码行不对应：

我的问题是：

• 如何在保持代码行与实际原始代码行对应的同时避免代码溢出？

Answer 1

您可以使用CodeMirror编辑器。它有很多功能支持，包括自动换行和只读，如Sublime Text Editor。

Answer 2

我猜它确实对应原始代码行。由于包装，你会弄乱编号。尝试使用JavaScript包装代码 - 添加新的行符号\n和插入返回符号\r（取决于您的编程环境及其设置），看看它是否有帮助。

Answer 3

您还必须对JavaScript进行一些更改。

此处的评论部分底部对此进行了解释，包括jsfiddle中的演示：https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap