1

line with backtick or code block
line with backtick or code block

Why is the first line automatically indented by one space when using backticks or <code> tags to surround multiple lines?

Is this intentional or a design flaw?

1 Answer 1

Reset to default
6

The padding of the <code> element is set to 1px 5px 1px 5px, thus indenting the left and right by five pixels. This makes sense because inline code needs to be properly spaced and it'd look weird without the padding.

Why does it look weird when using it for multiple lines? Because <code> is not meant for that. <code> is for inline formatting. You should use <pre></pre> instead if you want a block element.

Compare the incorrect backtick / <code> variant:

<code>multiline  
foo</code>

Which renders as:

multiline
foo

And the correct:

<pre>
multiline
foo
</pre>

Which renders as:

multiline
foo

Always use the latter for multiline code. You can of course indent code by four spaces as well to achieve the same thing. Or press CtrlK to indent selected text with our editor.

    multiline
    foo
5
  • Hm, I stumbled upon this while trying to correct this question. Now, If I replace <code> with <pre> it will add a line break. While this would suit in this case, there are probably cases where I want to avoid line breaks. What then?
    – nixda
    Commented Aug 11, 2013 at 13:13
  • Also, you can indent multi-line code with 4 spaces (Ctrl+K) and wrap inline code in backticks (also Ctrl+K).
    – Oliver Salzburg Mod
    Commented Aug 11, 2013 at 13:23
  • @nixda In cases like the question you linked to it'd probably make sense to use a bulleted list and not use code formatting at all — after all, it's not code or some command here, but just the names of some settings.
    – slhck Mod
    Commented Aug 11, 2013 at 13:38
  • Though <pre> (currently) is styled using a fixed-width font, I'd say for code one should use <pre><code>. (Which is exactly what using the four spaces Markdown gets one. Using the four spaces also gets one automatic encoding of HTML entities such as changing <strong> into &lt;strong&gt;.)
    – Arjan
    Commented Aug 15, 2013 at 7:52
  • @Arjan True, that is the semantically correct way. The problem is that after <pre><code> you'll get an extra line break if you start the code on the next line.
    – slhck Mod
    Commented Aug 15, 2013 at 7:54

You must log in to answer this question.

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