Formatting of inline code is ugly and can result in river-like patterns when used frequently

Question

This has bothered me for a while... Ever since the bulky padding and gray background were added to <code> elements, really. But I kept hoping I would get used to it...

...I didn't. It's ugly, it's distracting, it makes me not want to mark inline code and identifiers when I'm answering questions.

The problem

Here's what I'm talking about:

The horror http://shog9.com/so_code_slur.png

Note how the keywords and identifiers pop out of their surrounding text, completely destroying my best efforts to integrate language keywords with the grammar of the sentences referencing them. That's annoying.

But that's not the worst of it. The background shading, coupled with the excessive padding, can lead to something not unlike rivers when code appears on adjacent lines:

Way down down along lazy river road http://shog9.com/so_code_river.gif

This is terribly distracting. What's the point of carefully marking up key parts of text if the result is ugly and distracting?

A solution

First, get rid of the padding:

getting better... http://shog9.com/so_code_no_padding.png

This already helps. The text isn't so broken-up, and you can kinda separate the code on adjacent lines. But it's not enough. That background color still intrudes, tainting what should be clean, white space around the letters. Ditch it, and color the text itself. Maybe increase the weight, if you're really worried about it blending in too much:

ahh... much better http://shog9.com/so_code_subtle.png

There. No gray padding ghetto, no rivers... Much less offensive. At least, I think so. Anyone else?

Answer 1

Adding this answer by request.

This is like arguing that it's OK for a post to be an enormous list of bullet points. Because you have all these points you're trying to make, natch! Uh, no.

If every third word is code, then you're not writing prose, you're writing code, and it should be a <pre> block with .. actual code. Not enough words. So either add more words that explain around the code, or just make it all code, slap it in a 4-space-indented <pre> and forget about prose altogether. Things that are bad (tons of marked up code with almost zero plain, readable explanatory prose) should look bad. So if you're marking every third word as code and complaining that it looks bad, that's intentional!

Too much <code> is overwhelming, just like too much bold, too much italic, too much ALL CAPS, too much … you name it. There should be a healthy mixture of readable, explanatory prose interspersed with small snippets of code for emphasis.

So, rather than using <code> to mark up simple identifiers that are only "code" in the loosest sense of the term, use italics.

Answer 2

The genesis of this feature, for reference:

I have a different preference for how code-in-text could be formatted: change the background colour for that section of the text too. That's a lot clearer than quotes in my view, as well as not interfering with code which uses quotes.

Posted by Jon Skeet on July 5, 2009
Make it easier to put quotes around code samples

I for one agree with Jon, and I am now quite annoyed by this question as I think you are cherry picking examples (and/or making crap up) to show abuse, when anything can be abused. Like my bold example.

Here's a more typical post where I think the background of the <code> block makes it quite readable, far more readable than just changing the font -- as Jon Skeet noted.

http://img6.imageshack.us/img6/5459/img1y.png

Do you really find the backgrounds objectionable in these code blocks?

If so, then I guess de gustibus non est disputandum.

Answer 3

It's so obvious and clean, one wonders why this cannot be implemented immediately. Was your mockup above just a mockup, or do you have some CSS modifications in mind for this?

IMHO, insertion text with a differently-coloured foreground is generally more readable than a differently-coloured background (assuming that sufficient contrast remains).

Answer 4

While I agree with Jeff,
it doesn't hurt to use a user style:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("stackoverflow.com") {
  p code {
    padding:0 !important; 
  }
}

Answer 5

Building on John Rasch's answer with Shog9's formatting (see comments on that answer by Æther), here's a complete userContent.css file for Firefox to address this. Obviously, you'll want to season to taste.

This covers both in-post and in-comment <code> blocks.

Save as userContent.css, and place under your Mozilla Profile's chrome directory:

• On Windows, this will likely be a variant of %AppData%\Roaming\Mozilla\Firefox\Profiles\profileName\chrome. (It may be in Local for you; mine is in Roaming.)
• On MacOS, this will likely be a variant of ~/Library/Application Support/Firefox/Profiles/profileName/chrome/, however currently my Mac is not loading from there.

---

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("stackoverflow.com") {
  p code, .comment-text code {
    padding:0 !important; 
    background-color: white !important;
    color: #602020;
    font-weight: bold;
  }
}

@-moz-document domain("meta.stackoverflow.com") {
  p code, .comment-text code {
    padding:0 !important; 
    background-color: white !important;
    color: #602020;
    font-weight: bold;
  }
}

@-moz-document domain("superuser.com") {
  p code, .comment-text code {
    padding:0 !important; 
    background-color: white !important;
    color: #602020;
    font-weight: bold;
  }
}

@-moz-document domain("serverfault.com") {
  p code, .comment-text code {
    padding:0 !important; 
    background-color: white !important;
    color: #602020;
    font-weight: bold;
  }
}

Answer 6

Obligatory Greasemonkey solution:

// ==UserScript==
// @name          "FORMATTING OF INLINE CODE IS UGLY AND CAN RESULT IN RIVER-LIKE PATTERNS WHEN USED FREQUENTLY" or "HOW I LEARNED TO STOP WORRYING AND LOVE THE SHOG9"
// @namespace     http://scfs.me/
// @description   Will reformat the wonderful inline code elements on S[OFU] to look more awesome.
// @include       http://meta.stackexchange.com/questions/*
// @include       http://stackoverflow.com/questions/*
// @include       http://superuser.com/questions/*
// @include       http://serverfault.com/questions/*
// ==/UserScript==

(function(){
    function jqwait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { 
            window.setTimeout(jqwait,100); 
        } else { 
            makepretty(unsafeWindow.jQuery);
        }
    }
    jqwait();
    function makepretty($) {
        $("code").css({'padding' : 0, 'color' : '#600', 'background-color' : 'transparent'});
    }
})();

Answer 7

Ok I'm going to add another answer...

Jeff said:

So, rather than using <code> to mark up simple identifiers that are only "code" in the loosest sense of the term, use italics.

Italics for code identifiers still look lousy unless it's a monospaced font, which is generally what people are going for when they use ` markup. That's definitely what I use ` for (except in comments when ` is all there is to post a few short code snippets). So perhaps we could benefit from having a new style element for code identifiers? It could use styling similar to what Shog9 suggested originally, but can leave the styling of the code div block alone.

There's no reason why the code div and code span elements need to be styled the same.

PS. There's way too much snarkiness and personal attacking going on in this thread. It's not about me, it's not about you, it's about making the site better. So knock it off already!

Answer 8

99.9% sure we won't be "fixing" this problem by adding another noisy color to the page.

Have you considered not using <code> blocks so aggressively in your text?

I don't know if you noticed but any text with too much of a particular formatting style becomes difficult to read. Perhaps using such formatting styles in moderation would be a more effective solution?

Treat the disease, not the symptoms.

EDIT: is this even a real example of a Stack Overflow post, or a strawman you constructed? I can't find any of the strings in the "example" you provided, either through Google search or Stack Overflow phrase search.