Superbest Superbest - 3 years ago 206
Markdown Question

How to force a linebreak?

I've noticed that if I start a new paragraph right after an image, most renderers leave inadequate space between the image and the text below. The paragraph ends up looking like a legend. While this is useful when I do want to have a legend, sometimes I'd just like to insert an image in between two paragraphs, and have it adequately spaced below as above.

I correct this issue currently with:

Lorem ipsum dolor sit amet, consectetur adipiscing elit:



Pellentesque pharetra turpis vitae velit consequat placerat. Duis sed volutpat neque, et scelerisque orci.

But this strikes me as inelegant: I would like to avoid the HTML if possible.

Is there another way to force a linebreak?

I'm using Markdown Preview Plus for Atom to render.

Answer Source


In short, you can't with pure Markdown. You need to use raw HTML and/or CSS styles. The simplest is to insert <br/><br/> into your document.

The long explaination

Browsers determine how to display the various HTML elements in a page by obtaining instructions from style sheets. Those style sheets can be obtained from multiple sources: (1) the browser's default style sheets, (2) local user-defined style sheets, (3) style sheets provided by the document author, and (4) inline styles embedded in the HTML (this fascinating, albeit lengthy, article breaks down the entire process).

What we want to consider is the first; the browser's default style sheets. These tell the browser the default styles for the various elements, the padding of a paragraph, the size of the different level headers, the indentation and bullets of list items, etc. In fact, a quick search turns up a whole slew of so-called "reset" style sheets which undo all these default styles.

This is what you are encountering, the default styles are not providing sufficient padding between the image and the paragraph following it. You have a few options to address this:

  1. Define a user style sheet (stored on your local machine) which your browser would use to alter/override the default style sheet. Of course, this would only effect you on that machine. Any other machine would still use the default styles.

  2. Define a style sheet for your page which gets attached to the page through a template or something. However, if you are posting your documents on a host which doesn't allow such control (like a wiki), then that won't help either.

  3. Define some inline styles within the document. Of course, this means you would need to define raw HTML for your image. And on some services, the raw HTML and/or inline CSS might be stripped out.

In the end it all depends on how you intend to use your documents. But that don't really answer your question. How can you accomplish this in Markdown? In short, you can't.

As the author of Markdown explains (emphasis preserved):

Markdown's syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown's formatting syntax only addresses issues that can be conveyed in plain text.

If you are concerned about padding between elements, you are concerned with formatting, not writing, which is beyond the intended scope of Markdown. Yes, it is possible to revert to raw HTML (possibly with embedded inline CSS) to force your desired formatting, but that is exactly how it is supposed to work. In fact, the next paragraph in the above quoted document states:

For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

So, the appropriate way to address your issue is with raw HTML and/or CSS, not with some special Markdown syntax.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download