Code block should avoid auto-wrap

[calfzhou]

Shown as the following screenshot, the long-code-line wrapped, and won't align correctly with line numbers.

And if the line number is bigger than 9 (has more than one digits), it will wrap too! Which makes the code-block looks ugly.

[calfzhou]

Add style white-space:pre; to code-block <pre> tag could fix this. But how to add a proper horizontal scroll bar?

[talha131]

@calfzhou thanks a lot for reporting this issue. I have fixed the issue to the best of my knowledge. Can you please confirm the fix?

I have also made a change that hides line numbers on tablets and phones to save space for actual content. What do you think of it? You can see it by changing your browser window size.

@tshepang you too please share your opinion on this "hiding" feature.

[calfzhou]

Thanks @talha131 for this fix! It works well on my blog :) And i like this "auto hiding" feature very much.

One more opinion is that, "line numbers" should expand its column width instead of show a scroll bar. A scroll bar on this thin column makes user hard to read the numbers.

Style vertical-align: top could be added to each td to get better alignment when only one scroll bar is visible.

[tshepang]

damn, that was a horrible bug

[tshepang]

is good @talha131

[talha131]

@tshepang thank you for your feedback.

@calfzhou

"line numbers" should expand its column width instead of show a scroll bar.

I agree. I have fixed it. But there is a bug in my implementation which I could not fix with all my efforts. If your code snippet has more 100 lines then your line numbers will be cut from the right. But for 1-99 it works fine.

You are quite knowledgeable about CSS. Can you please suggest a fix?

Style vertical-align: top could be added to each td to get better alignment when only one scroll bar is visible.

I have added it though I cannot see this issue on my system. I couldn't notice it earlier because my scroll bars are set to auto hide.

Keep coming up with feedback, patches and suggestions.

[calfzhou]

@talha131 , the problem is really hard to solve. I tried several times but cannot find a better solution. I remembered that my previous Wordpress code block plugin wraps the table in a div, it gives the div a width: 100%; overflow: auto; style. You could see a demo at http://kpumuk.info/projects/wordpress-plugins/codecolorer/ .

Pygments generate a naked table. Without the wrapper div, styling becomes much harder. In Pygments document (http://pygments.org/docs/formatters/#htmlformatter), I found that there is a div wrapping the code table in the example, but maybe they changed the behavior.

[talha131]

@calfzhou Thanks for investigating this issue. I think current solution is a good middle ground. I don't think users usually post 100+ lines of code in a post.

[calfzhou]

@talha131,

I couldn't notice it earlier because my scroll bars are set to auto hide.

You are using Mac, am I right? I tried my Mac system today, and found the cool scroll bar, it is auto-hide. Is it possible to make it work on every system using CSS?

[talha131]

Is it possible to make it work on every system using CSS?

Scroll bar look and behavior is a function of OS. Some apps create their custom scroll bars using third party widgets. In any case, its behavior and look is a function of OS or app. That's why it can't be controlled with CSS.

[rednafi]

Code blocks are still getting auto-wrapped like this:

How can I get a scrollbar if the line is longer than a cutoff?