9

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.

6
  • 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 '13 at 16:48
  • Can you point to a post where you see this as an issue. 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. 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. Mar 4 '13 at 19:32
8

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

SU quote

1
  • This is what i mean!
    – Christoph
    Mar 4 '13 at 17:00
-1

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;.

13
  • 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! 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. 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. 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 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 .