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. May 3, 2019 at 3:50
  • 9
    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. May 3, 2019 at 5:13
  • Adding to what @Sonic says, <pre> blocks has border-radius: 3px while inline <code> doesn't. May 3, 2019 at 6:54
  • I agree, that the title/caption should not itself be formatted exactly like code. However I would argue it should be clear, that a caption for a few lines of code like a file name belongs to the code - I do not perceive a subheading to clearly convey that typographically (too much bottom-spacing).
    – IARI
    Apr 25, 2021 at 14:48

1 Answer 1


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.
  • 1. It's not an abuse, it's semantically correct as defined by HTML5 specs. See this answer and the whole question as well.
    – EvgenKo423
    Jul 29, 2019 at 15:58
  • 2. It may be mostly necessary for answers. For example, here is the answer in which I used this trick. It's about interacting with other modules and I can hardly make it any shorter. What would you recommend in this case?
    – EvgenKo423
    Jul 29, 2019 at 16:03
  • @EvgenKo423 I‘m currently in a low-Internet region. I‘ll respond to your comments in a week or so. Jul 30, 2019 at 7:33

You must log in to answer this question.

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