85

Currently, I have this line in a Markdown file detailing command output:

1\. Work (00:10:00)  
    1\. Mail letter (00:05:00, Est. 00:03:00)  
      Send letter to Foo Bar  
2\. Personal (00:02:00)

However, when I preview the Markdown file, all of the whitespace is disregarded.

1. Work (00:10:00)
1. Mail letter (00:05:00, Est. 00:03:00)
Send letter to Foo Bar
2. Personal (00:02:00)

How do I preserve this whitespace?

1
  • 1
    Just as an aside for other people who stumble upon this that I found helpful from this SO post: If your markdown compiler supports HTML (most does) then you can use <br> to create line breaks. I know this isn't the type of white space the OP discusses, but people might find this helpful. Dec 5, 2016 at 7:22

7 Answers 7

106

Markdown is used primarily to generate HTML, and HTML collapses white spaces by default. Use &nbsp; instead of space characters.

3
  • This works for Jupyter notebooks (though I had to add lots of them to get the spacing I wanted). Dec 6, 2016 at 21:33
  • 10
    In github markdown inline code blocks (possibly other places) you can use <code>&nbsp;</code> to preserve spaces, instead of using backticks.
    – Nicolai S
    Jan 14, 2018 at 16:22
  • 2
    The <code> method works also in Jupyter Notebook.
    – Marijn
    Nov 27, 2019 at 8:54
44

Use non-breaking spaces

To preserve spaces in a markdown document use a non-breaking space:
"a space character that prevents consecutive whitespace characters from collapsing into a single space, and also prevents an automatic line break at its position".

Example

See an online and editable example here.

This line uses            non-breaking            spaces in many places;       they are not collapsed.
                                   There is no need to use code blocks.

This line uses many consecutive spaces in many places; they are all collapsed.

Note:
Copy and paste the previous example could not work because sometimes the non-breaking spaces are changed to normal spaces in a copy-paste operation :‑(.

Or try a table

However, if you intend to use non-breaking spaces to align text, prefer to use tables.

Example code:

| Country  | Capital |
| -------- | --------|
| Portugal | Lisbon  |
| Spain    | Madrid  |
| Cuba     | Havana  | 

But not all Markdown implementations recognize the previous syntax.

How to introduce a non-breaking space?

  • In macOS, you need to press ⌥ Opt+Space
  • In Windows, sometimes work Alt+0+1+6+0 or Alt+2+5+5
  • In many commercial software Ctrl+Space
  • In Linux, Compose key enabled Compose Space Space

The beauty of this solution is that you don't need to use any code in your Markdown document. For example, in HTML you must use &nbsp;.

PS:
Reader, please, let us know in the comments is this method does not work in your particular markdown editor. I have tested this method in two apps and several online editors.

9
  • 1
    In Clion on Ubuntu, I enter the non-breaking space with alt gr + Space Aug 11, 2021 at 5:17
  • @FredSchoen hi, what is alt gr key?
    – Chan Kim
    Sep 8, 2021 at 7:34
  • I'm using vnc for connecting my ubuntu machine. How do I enter compose space space? I don't such a key..
    – Chan Kim
    Sep 8, 2021 at 7:35
  • @ChanKim It's this key I have on my German keyboard, en.wikipedia.org/wiki/AltGr_key If you use a US keyboard, you may not have it Sep 9, 2021 at 19:52
  • 1
    @ah25 It's apparently a bug in Jupyter. See this: github.com/jupyter/notebook/issues/3105.
    – ePi272314
    Apr 19, 2022 at 9:17
29

One alternative is to use

<pre></pre>

like:

<pre>

    1 
   / \ 
  2   2 
 / \ / \ 
3  4 4  3 
</pre>

the pyramid will be preserved.

Of cause, you can use &nbsp; . I use them both, depending on needs.

1
  • 1
    Nice! For others who are wondering what <pre> is for, it's an HTML tag for pre-formatted text. "Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code."
    – John
    May 22, 2020 at 5:39
5

I find &nbsp; very cumbersome to use, ie. if you have large document, it may become ugly for edit, and you would need lot's of copy pasting of &nbsp;, and in the end you will also need to adjust indentation.

instead use 3 accents (```) to denote code (well, you only care about indentation and whitespace here).

for example this is how text looks without any formatting:

Enabled = "True"

Profile = ("Domain", "Private")

Direction = "OutBound"

RemotePort = ("8080", "8081")

LocalPort = ("9080", "9081")

And this is how it looks with &nbsp; doing quick copy paste

Enabled      = "True"

Profile      = ("Domain", "Private")

Direction      = "OutBound"

RemotePort      = ("8080", "8081")

LocalPort      = ("9080", "9081")

And here is my sulution, very simple, quick and effective:

Profile               = ("Domain", "Private")
Direction             = "OutBound"
RemotePort            = ("8080", "8081")
LocalPort             = ("9080", "9081")```


**EDIT:**

This last example is surrounded by 3 accents at the beginning and at the end, ex:
(```)
your text here
(```)
1

A possibility that I've used in contexts other than markdown, but that appear to work for markdown too is to use one of the other Unicode whitespace characters.
Unicode.org general punctuation PDF
A site from which you can copy/paste the characters.

For example, I've tried the Em Space (U+2003) and it displays as a single space in vim, in VSCode, and on GitLab (private company page I have).

It's not without a couple of possible downsides though.

  1. Since it appears as a normal space in editors, someone else may be quite confused as to why their spaces don't work, but others(yours) on the page do. Maybe put a comment in your document to alert others.
  2. It may not be future proof, if HTML rendering engines start treating even those Unicode general punctuation spaces as they do ASCII space and tab, then you're back to needing other methods.

caveat emptor

-1

In vscode, add the extension "Trailing Spaces." Then to exclude by syntax, go to Preferences > Settings and check Markdown>Preview:Breaks or in settings.json, add "markdown.preview.breaks": true

-5
  1. Create a new file Markdown.sublime-settings in the Packages > User (in mac OSX, Preferences → Browse Packages...) if it already does not exit.

  2. Add the following content in the Markdown.sublime-settings

    {  
        "trim_trailing_white_space_on_save": false  
    }

Note: you can do this same trick with any other language specific settings you'd like to create).

1
  • 10
    That's good but the OP never mention he or she is using sublime.
    – S4M
    Apr 9, 2016 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.