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+*/　　
} 

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

我的问题是：

• 我该如何避免代码溢出同时保持代码行与原始代码行相对应？

- Charles0429

---

这对我很有帮助，谢谢！ - C0D3

我在这个主题中解释了问题的解决方案：https://stackoverflow.com/questions/61882374/how-to-add-word-wrap-propery-to-syntaxhighlighter-evolved-v-3x - Habip Oğuz

Answer 1

你可以使用CodeMirror编辑器。它具有许多功能支持，包括自动换行和只读，就像Sublime Text编辑器一样。

- TheMisir

Answer 2

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

- Michael Sazonov

Answer 3

你还需要对 JavaScript 进行一些更改。

这在评论区底部有解释，包括在 jsfiddle 上的演示：https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap

- void

---

这会导致404错误。直接在StackOverflow上回答问题总是更好的选择。 - afilina