11
\$\begingroup\$

It is often useful to cite blocks of code, particularly when writing an answer, and you want to distinguish between code that you are proposing and code that you are discussing. However, code blocks that are inside blockquotes currently look rather ugly, with non-uniform yellowish margins around a gray block.

Here's a screenshot:

Example of a cited code block

What visual design could work better?

\$\endgroup\$
5
  • 2
    \$\begingroup\$ I don't think the current design is that bad. But then again, I'm not really known for my design skills... \$\endgroup\$
    – Simon Forsberg
    May 12, 2015 at 18:29
  • \$\begingroup\$ I've used that feature and recently I've started to find it make answers bigger than what they really need. We need to identify what part of the codes we are reviewing, but it's make a lot duplication. \$\endgroup\$
    – Marc-Andre
    May 12, 2015 at 18:30
  • \$\begingroup\$ While we are talking about this, it'd be absolutely stellar if we could get code blocks with line numbers. \$\endgroup\$
    – nhgrif
    May 12, 2015 at 18:31
  • \$\begingroup\$ @nhgrif Line number request \$\endgroup\$
    – 200_success
    May 12, 2015 at 18:37
  • 8
    \$\begingroup\$ While we're talking about this, it'd be awesome if our whole design could be renewed and that "beta" label dropped ;) \$\endgroup\$
    – Simon Forsberg
    May 12, 2015 at 18:38

2 Answers 2

Reset to default
8
\$\begingroup\$

The asymmetric bottom margin is an unfortunate combination of these CSS rules:

pre { margin-bottom: 1em; }
blockquote { padding: 10px; }

so it could be fixed with:

blockquote > pre:last-child { margin-bottom: 0; }

with the following result:

quoted code block with symmetrical margins

I note that the style sheet already has a similar rule for p elements, presumably for the same reason:

blockquote p:last-child { margin-bottom: 0 }

I think it's probably an error to omit the > here, because a p element can match :last-child without being the last child of the blockquote — it might be the last child of some intervening element such as li, in which case we should only suppress the margin if it's the last li in the ol and the last ol in the blockquote. To handle these cases, we need something like:

blockquote > *:last-child,
blockquote > *:last-child > *:last-child,
blockquote > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0;
}

Of course this will fail for more deeply nested structures, but I don't know how to specify the property of being the last descendant of an element in CSS.

I have all this in my user style sheet using Stylish.

\$\endgroup\$
0
2
\$\begingroup\$

I talked about the block quotes before, albeit in a different context. I like the way our formatting works in respect to code blocks and block quotes. It's really useful and Stack Overflow now uses a very similar format. (See previous link)

So, sure, it'd be nice to see the margins corrected, but I see little need to change it until 6-8 weeks months from now when we get our own design. Any real "design" to be done with the quote blocks revolves around color, and we can't really discuss that until we know what the site colors will be.

When that time does come, I want to see a high level of contrast between code blocks and quote blocks remain. It's absolutely essential to differentiating between OP's code and our code in answers. What we don't want is something like the old SO formatting.

Old StackOverflow:

SO code block vs blockquote

Code Review and New Stackoverflow:

CR code block vs blockquote

\$\endgroup\$
2
  • \$\begingroup\$ My motivation for mentioning it now is so that the designers can take these kinds of issues into consideration when making our theme. \$\endgroup\$
    – 200_success
    May 17, 2015 at 15:42
  • \$\begingroup\$ I figured as much. Doesn't really change my answer. It ain't broke (mostly). Don't fix it (mostly). \$\endgroup\$
    – RubberDuck
    May 17, 2015 at 15:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .