Code block formatting on the front page and in comments

[kbauer]

Originally posted in https://what.thedailywtf.com/topic/29205/website-feedback-code-block-formatting-issues, until I got a reply mentioning this repository.

In the comment section of articles, code block formatting is a bit odd, affecting both desktop Chrome and Android Chrome. Same on the frontpage too:

• Scrollbars. It has an unnecessary greyed-out scrollbar, when none is needed. Especially for one-liners, this adds a lot of visual noise.

• Spacing. There is whitespace above but not below the code block. The space below the code block, that I would expect to be empty, is currently occupied by the unnecessary scrollbar.

• A minor thing, but: It does not follow common conventions to make it easier to distinguish code blocks from prose:

  • The articles on thedailywtf.com, Github, Reddit, this forum all use distinguished background coloring. Often combined with some padding.
  • In plain markdown, the four-space indentation does a good job o separating text from code visually, even without extra highlighting.
  • By contrast, comment pages and the front page have only monospaced font and a small padding.

[apxltd]

@kbauer if you can do some F12/browser tools hacking and then modify the appropriate less file, I'll try to get it built and deploy or show a preview.

I just made some other changes to the less files like this:
029b680

[kbauer]

I do not know about the .less format, but the relevant CSS rules are:

• pre>code has overflow:scroll defined in main.css, which causes the code tag to always have a scrollbar, as opposed to overflow:auto, which shows a scrollbar only on demand.
• In article pages, this is overridden by class hljs from github.css which sets it to overflow-x: auto. It also sets background: #f8f8f8.

The obvious solution for the scroll bars would be to change in main.less

pre > code {
	padding: 0.5em;
	display: block;
	overflow-x: scroll;
}

to overflow-x: auto. Consistency with the formatting in articles would be more involved, as it relies on classes defined in github.css, which is apparently an attachment on the website and not part of this repository. Same for language-specific highlighting.