No internet connection

Visualizing Markdown's double space line breaks

By KajMagnus @user_1452013-06-16 18:11:43.448Z

How will this Markdown source render: (will there be a line break?)

Roses are red
Violets are blue

You should have no idea, since any trailing spaces are invisible (they indicate line breaks, in Markdown). Also you don't know which particular Markdown flavor is in use — you don't know how it handles line breaks with no trailing spaces.

However, how will this Markdown source render:

Roses are red·↵
Violets are blue

With a line break, obviously. And how will this render?

Wise mice·
slice rice

On a single line, because a single trailing space tells my Markdown flavor not to line break. Perhaps you want a newline in your Markdown source, to make it more readable. But you want no break in the generated HTML.

I've written a CodeMirror editor addon that marks trailing spaces with "·" or "" depending on their position. To view a live demo, click this text and select Improve, and append spaces here and there. (But please don't click Submit unless there's a good reason.)

Usage Instructions

Load these two Javascript and CSS files: (MIT license)
(Should I place them in a separate Git repo? Or is that overkill, only 2 small files)

And enable the addon like so:

var codeMirrorEditor = CodeMirror.fromTextArea(some-textarea, {
  mode: "markdown",
  showMarkdownLineBreaks: true,   // <---

What do you think?

Is this addon useful? Should something be improved / changed?

  • 0 replies