This page explains ways to manage whitespace rendering. It demonstrates how the site treats whitespace, illustrating common techniques, pitfalls, and workarounds to achieve needed formatting.
Inserting newlines
Default newline behavior
Code
What's
*up*?
How
are you?Result
What’s up?
How are you?
Two spaces at end of line
Code
Hello
thereResult
Hello
there
NB: This is a Markdown feature; note that there is no whitespace rendered after “Hello” at the end of the line.
Two backslashes at end of line
Code
What happens \\
if we use backslashes?Result
What happens
if we use backslashes?
NB: This is a Kramdown feature; note that there is a space included after “What happens” at the end of the line, because we included one before the backslashes.
Using an explicit <br>
Code
*Lions*<br>and **tigers**Result
Lions
and tigers
Aligning text
Most fonts are variable width, and so you cannot rely on the characters lining up over multiple lines:
Code
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+\\
| -=-=- Initializing Invincibility -=-=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+Result
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
Aligning via code fences
If you need fixed-width font, you can use code fences:
Code
```
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
```Result
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
| -=-=- Initializing Invincibility -=-=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=+
Aligning via span style
If you really just want a fixed-width font, without additional styling,
you can use the style attribute on a surrounding <span> element:
Code
<span style="font-family: monospace">
+-=-=-=-=-=-=-=-=-=-=-=-=-+\\
| -=- I'm *Invincible!* -=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-+
</span>Result
+-=-=-=-=-=-=-=-=-=-=-=-=-+
| -=- I’m Invincible! -=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-+
But if you do this on a block-level HTML element such as <div>, you won’t be able to mix in Markdown anymore:
Code
What are you going to do, bleed on me?
<div style="font-family: monospace">
+-=-=-=-=-=-=-=-=-=-=-=-=-+\\
| -=- I'm *Invincible!* -=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-+
</div> You're a loony.Result
What are you going to do, bleed on me?
You’re a loony.
…unless you add markdown=1 to the element in question:
Code
What are you going to do, bleed on me?
<div style="font-family: monospace" markdown=1>
+-=-=-=-=-=-=-=-=-=-=-=-=-+\\
| -=- I'm *Invincible!* -=- |\\
+-=-=-=-=-=-=-=-=-=-=-=-=-+
</div> You're a loony.Result
What are you going to do, bleed on me?
+-=-=-=-=-=-=-=-=-=-=-=-=-+
| -=- I’m Invincible! -=- |
+-=-=-=-=-=-=-=-=-=-=-=-=-+
You’re a loony.
…or wrap the Markdowny parts in a
<span markdown=1>.
Multiple spaces in a row
Normally, multiple spaces are squashed into one:
Code
It's a REALLY big deal!Result
It’s a REALLY big deal!
If you want the extra spaces to stay, use HTML’s code:
Code
It's a REALLY big deal!Result
It’s a REALLY big deal!
Preventing lines from wrapping at whitespace
Normally, lines can wrap wherever there is whitespace:
Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
If you don’t want it to wrap at a particular place, you can use instead of a regular space, but for whole paragraphs as above, it quickly becomes tiresome. Another way is to use a styled span:
Code
<span style="white-space: nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Beware of leading whitespace
If you use more than three spaces to indent lines, the Markdown processor will think you meant a code block:
Code
It works to indent 4 spaces without a leading blank line:
although you may be surprised that it continues on the same line.
But if you indent 4 spaces after a blank line, watch out:
Markdown kicks in, treating it as a block of code.
Even if a subsequent line is not indented!Result
It works to indent 4 spaces without a leading blank line: although you may be surprised that it continues on the same line.
But if you indent 4 spaces after a blank line, watch out:
Markdown kicks in, treating it as a block of code. Even if a subsequent line is not indented!