Search This Blog

SyntaxHighLighter: auto line break with pre wrap

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:

  1. http://stackoverflow.com/questions/6286733/automatic-line-break-in-js-syntaxhighlighter
  2. https://bitbucket.org/alexg/syntaxhighlighter/issue/182/version-3-making-code-wrap
  3. http://blog.2k1y.com/2011/05/how-to-add-syntaxhighlighter-3083-on.html
  4. SyntaxHighLighter: auto line break with pre wrap
  5. SyntaxHighlighter on Blogger: how to enable border

1 comment:

  1. I've been using this:

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

    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.




    ReplyDelete