Add the following css into your html page(blog template):
<style type="text/css">
body .syntaxhighlighter .line {
white-space: pre-wrap !important;
}
</style>
NOTE:
On SyntaxHighLither 3.0.83, enable the above css will make the line numbers go wrong. So better set
gutter: false to disable the line numbers if you have long lines in the code block.
SEE ALSO:
- http://stackoverflow.com/questions/6286733/automatic-line-break-in-js-syntaxhighlighter
- https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
- http://blog.2k1y.com/2011/05/how-to-add-syntaxhighlighter-3083-on.html
- SyntaxHighLighter: auto line break with pre wrap
- SyntaxHighlighter on Blogger: how to enable border
I've been using this:
ReplyDeletepre,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+*/
}
and searching for a fix.
Will look for .line { } in dev tools and go from there. Also, I'm looking for the js that referenced on the stack overflow page: https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
Getting into it, syntax highlighting is awesome from a dev perspective, but not mandatory. Trying to make a 3 year old plugin work for a post for the kansas city website designer, Evan Emerson isn't worth the extra time. We'll wrap the example code in a pre and be okay with that. Hopefully, it's explanatory enough to those who want to know.
Thanks man.