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). – LittleBobbyTables - Au Revoir Mar 4 '13 at 16:48
  • Can you point to a post where you see this as an issue. – Some Helpful Commenter Mar 4 '13 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 '13 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. – Dave Newton Mar 4 '13 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 '13 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. – Dave Newton Mar 4 '13 at 19:32

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 '13 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 '13 at 16:55
  • @Servy: But still, THE NAME! – Madara's Ghost Mar 4 '13 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 '13 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 '13 at 16:58
  • @WesleyMurch: But in this context it doesn't really matter in my opinion. – Madara's Ghost Mar 4 '13 at 16:59
  • 5
    @Servy if it helps, try not laugh reading this: color-hex.com/color/bada55 – Mike G Mar 4 '13 at 16:59
  • 1
    @mikeTheLiar I failed. – Servy Mar 4 '13 at 17:01
  • @mikeTheLiar: lol @ shades of badass. – Madara's Ghost Mar 4 '13 at 17:01
  • "This div background color is #bada55" – Servy Mar 4 '13 at 17:02
  • 1
    Everyone knows the best color is chucknorris. – user159834 Mar 4 '13 at 17:03
  • 2
    @Servy I get a little pop-up on the bottom right: "Love #bada55 color? +1" – Mike G Mar 4 '13 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 – Mike G Mar 4 '13 at 17:11
  • 50 shades of #bada55 – Dave Newton Mar 4 '13 at 17:31

You must log in to answer this question.

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