How do I ensure that whitespace is preserved in Markdown?

Markdown

Markdown Problem Overview


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?

Markdown Solutions


Solution 1 - Markdown

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

Solution 2 - Markdown

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 tray 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  .

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.

Solution 3 - Markdown

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.

Solution 4 - Markdown

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
(```)

Solution 5 - Markdown

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

Solution 6 - Markdown

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

Solution 7 - Markdown

  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).

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questioncheese1756View Question on Stackoverflow
Solution 1 - MarkdownMatt BallView Answer on Stackoverflow
Solution 2 - MarkdownePi272314View Answer on Stackoverflow
Solution 3 - MarkdownEric ChowView Answer on Stackoverflow
Solution 4 - MarkdownmetablasterView Answer on Stackoverflow
Solution 5 - MarkdownFiddler99View Answer on Stackoverflow
Solution 6 - MarkdownlorioView Answer on Stackoverflow
Solution 7 - MarkdownSaurabh KumarView Answer on Stackoverflow