Sometimes in Questions/Answers on Stackoverflow I really would like to have two easily distinguishable forms of emphasing (e.g. Code vs. Console Output). Unfortunately quotes and codeblocks look way too much alike so that they are of no much help, especially when having only short snippets of code where not much syntax highlighting is applied.

a quote block

a code block

I would like to see a subtle change of colors between these two and/or an additional "border-left" for the quote block to be able to distinguish these two elements better.

This might not be a perfect example, but you can take a look at this question.

In fact several other stackexchange sites differentiate quotes and codeblocks quite well.

  • 1
    I dunno, is this really necessary? The fonts are already different, you can use extra tags to highlight the code, and if the quote block is sufficiently long enough, you can tell it's a quote block because it will wrap around (code blocks don't do this). Mar 4, 2013 at 16:48
  • Can you point to a post where you see this as an issue. Mar 4, 2013 at 16:52
  • @LittleBobbyTables as I already stated, sometimes the code does not really hightlight, perhaps it's only pseudocode and/or the quote is not long enough. Sure it's a different font but just by having the rgb differ by lets say 10 points, it would probably already be enough to make it easier to distinguish.
    – Christoph
    Mar 4, 2013 at 16:55
  • 1
    What makes a left border a quote and not code (or vice-versa)? I'm pretty meh about this; I don't really see what the issue is in the linked question. Mar 4, 2013 at 17:18
  • @Dave I think you are missing the point... it does not matter which style applies to which block. It's just for better visual distinction.
    – Christoph
    Mar 4, 2013 at 19:20
  • 1
    @Christoph No, I disagree with the point. I've never been confused trying to decide if I was looking at a quote or a code block. Mar 4, 2013 at 19:32

2 Answers 2


The border-left concept used on Super User for quotes is pretty nice (though I preferred it in the original blue):

SU quote

  • This is what i mean!
    – Christoph
    Mar 4, 2013 at 17:00

Why? What difference would that make?

The point of code-block (other than the obvious syntax highlighting), is to provide with a monospaced font for easy reading of code. It doesn't really matter the color of it, or how similar it is to other elements.

But I guess it wouldn't be that much of a problem to add some sort of border-left: 3px #BADA55 solid;.

  • 5
    I was rather let down #BADA55 is not a particaularly badass color.
    – Servy
    Mar 4, 2013 at 16:55
  • @Servy: But still, THE NAME! Mar 4, 2013 at 16:56
  • I know, the name is epic, which is why I was so let down to see the color...not be. I wish the color was something I could actually use in a lot of places.
    – Servy
    Mar 4, 2013 at 16:57
  • -1 Color and background choice does make a big difference when designing a website, your tone is overly dismissive.
    – user159834
    Mar 4, 2013 at 16:58
  • @WesleyMurch: But in this context it doesn't really matter in my opinion. Mar 4, 2013 at 16:59
  • 5
    @Servy if it helps, try not laugh reading this: color-hex.com/color/bada55 Mar 4, 2013 at 16:59
  • 1
    @mikeTheLiar I failed.
    – Servy
    Mar 4, 2013 at 17:01
  • @mikeTheLiar: lol @ shades of badass. Mar 4, 2013 at 17:01
  • "This div background color is #bada55"
    – Servy
    Mar 4, 2013 at 17:02
  • 1
    Everyone knows the best color is chucknorris.
    – user159834
    Mar 4, 2013 at 17:03
  • 2
    @Servy I get a little pop-up on the bottom right: "Love #bada55 color? +1" Mar 4, 2013 at 17:03
  • 1
    "I want you to reach into the internet and get my page out." "Which one is yours?" "It's the one that says 'background-color: #bada55;'" youtube.com/watch?v=6_tbKQ0wS34 Mar 4, 2013 at 17:11
  • 50 shades of #bada55 Mar 4, 2013 at 17:31

You must log in to answer this question.

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