— for the fruitful conversations Logout
Please consider upgrading to a newer version of Internet Explorer (or install Google Chrome, it's even faster).

Visualizing Markdown's double space line breaks

By KajMagnus, 2013-06-16 18:11:43Z, improved , 2013-06-18 05:34:58Z

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)
codemirror-show-markdown-line-breaks.js
codemirror-show-markdown-line-breaks.css
(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 comments Logout
  1. Reply Like? More

You have been logged in, welcome Anonymous!

Login failed: unknown error

Be notified via email of replies to your comments?

You can select many rating tags.

You are changing your rating.



Submitting ...

Comments rated interesting, funny
Your post has no ratings, and was therefore placed below.
Comments rated boring, stupid
(Click this box to dismiss)