No internet connection
  1. Home
  2. Ideas

Visualizing Markdown's double space line breaks

By KajMagnus @user_145
    2013-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)
    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 replies