I'm sure this is an accident, but I've recently found out that you can "label" code blocks in a really nice way by using inline code in a level 4 (####) header:

#### `Main.hs`

module Main where
main :: IO ()
main = putStrLn "Hello World!"


module Main where
main :: IO ()
main = putStrLn "Hello World!"

This is great for situations where you might need to describe multiple files. However, (and this why I think this is probably an accident), there's a little "oopsie" in the upper-left corner, where the label and code block meet. (It's even more noticeable on the normal white background.)

image of the rendered label and block inside a blockquote, showing a little divot where they don't quite meet up ditto, but against the normal white background

I think these code blocks would look a lot more polished if this could instead produce a straight edge.

  • 1
    For those who can't see or zoom: there is indeed a fault here. The first code block has perfect pointy corners, while the second one has ever so slightly rounded corners. – Sonic the Anonymous WizHog May 3 at 3:50
  • 8
    What's so "nice" about this? The title/caption should not itself be formatted as code, so you can instead use bold or a normal subheading, which will look even better. – Cody Gray May 3 at 5:13
  • Adding to what @Sonic says, <pre> blocks has border-radius: 3px while inline <code> doesn't. – iBug May 3 at 6:54

While I agree, that the visual effect is nice, I doubt this will be fixed/changed for these reasons:

  • It's abuse of formatting. As Cody Gray already said, this uses a combination of markup, that is not intended for this task. This might lead to accessibility problems for users who can't use a standard browser.
  • It is unnecessary. You can use normal headings or paragraphs to separate distinct "files". Also, if you really need to do this for multiple files, you are probably doing something wrong.
  • Previous attempts to introduce tabs-like behavior have been rejected by the community. See here for example.
  • It is inconsistent with the design. You see, the buttons have rounded corners, and so have the tags, your user card, and some other design elements. It would only be consistent, if the code block had rounded corners too.

You must log in to answer this question.

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