SyntaxHighlighter word wrap?

Question

I used syntaxhighlighter in my front web page to highlight code. But I came across a question that the word in the code isn't wrapped when the code length is longer than the length of the <div>.

then I googled it. And found a way mentioned below:

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

However, a new problem appeared, the line number is not corresponding to the actual code line：

My question is:

• How can I avoid the code overflows while keep the code line be corresponding to the actual original code line?

Answer 1

You can use CodeMirror editor. It has a lot of feature support including word wrap and read-only like the Sublime Text Editor.