I often need some effort to distinguish a Code Block from a Blockquote: overall because they share the same background.

Don't you think Blockquote elements would be more readable and distinguishable from Code Block elements if they had a different style?

For example:

  • yellow background
  • different font
  • quotation marks on top left and bottom right corners

Is it possible to improve Blockquote style? And how would you change it?

  • 7
    +1 from me; I always found it a bit confusing that the styles (except for the font) are just the same. Apr 4, 2011 at 15:13
  • 3
    I don't much care for quotation marks. I think you get a lot more value out of a thin, vertical line in the left-hand margin. Super User already has this (random example). That makes it obvious the snippet is not code, but also doesn't intrude on readability. It's a minor change, but I think an improvement. Apr 4, 2011 at 16:33
  • It's in a different font already. That is, if you don't put code in quote blocks :) However, somewhere you're right. I myself tend to make all quotations from the OP's post italic. But from other resources, I just keep them as-is.
    – user138231
    Apr 4, 2011 at 16:41

4 Answers 4


The font is already different, there is a larger left margin on block quotes, and generally code blocks have been syntax highlighted in an obvious way. However, these differences are most obvious when they are placed side by side and depending on the content/size of either they can be difficult to distinguish with their current styles when placed separate from one another.

I agree with @jjnguy that too many styles can make a page look noisy, but they can also provide clarification when the differences are obvious, but minimal, and in keeping with the overall tone of the site.

@Cody Gray's sample from Super User with the thick left border is a great example of what I'd like to see. It could look something like this:

Proposed Style

I like this for many reasons including:

  • Standard style used on many sites which helps make the meaning obvious
  • Minimal impact on page "noise"
  • Easy to implement (can be done in one additional CSS attribute)

I'd hate to see large quotation marks, italics, a large leading letter, bubbles, background images, inverted colors, or any of the other potentially horrible designs I've seen. Although, we could just go all out and do something like this:

Unicorns are Pretty

  • 8
    disagree Apr 4, 2011 at 19:59
  • @Nick D that is awesome. That might just be the best example of page "noise" I've seen since the mid 90s. Apr 5, 2011 at 15:08
  • 1
    @NickDandoulakis that's just hateful
    – apaul
    Aug 19, 2013 at 2:58
  • I actually read the whole quote, and it's awesome. Edit: read it another time for fun. Even more awesome. It reminds me of Lewis Carroll's "Jabberwocky". I hope you write. Oct 8, 2014 at 11:36

I like the current style. Adding too many different styles can make the page look noisy.

I think it is easy enough to distinguish code blocks from block quotes with the current style.

  • 2
    I agree with both. I hate noisy pages, but I would welcome the addition of not-too-big quotation marks.
    – Aleadam
    Apr 4, 2011 at 15:16

I like how blockquotes render on Code Review. The light yellow shading makes it easier to tell quoted code from suggested code:

Code Review quoted code

It's very common to quote code on CR; if blockquotes looked like regular code blocks the way they do on Stack Overflow, I find such a change would reduce the usefulness of blockquotes:

Stack Overflow quoted code

The only indicator we get on SO, is increased indentation, as opposed to:

  • Yellow-ish background
  • Orange-ish left border
  • Dotted gray left border in code blocks, quoted or not

I don't see how these "clutter up" the site, or "add noise".


I think the bg color and font are fine but I'd like to see a very thin top and bottom border.

You must log in to answer this question.

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