CodeMirror可以显示Markdown换行符吗？

Question

Markdown模式下的CodeMirror可以被告知显示换行符吗？

示例：下面是带有2个尾随空格的Markdown行，表示“我要在此处换行”。然后另一行没有尾随空格，意思是“请不要换行符”。但是，由于后面的空格是不可见的，如果可以绘制¶或↵以指示将插入新行，我会发现它很有帮助。

Roses are flowers ↵ 
Violets are also flowers 
and wise mice slice rice 

这将作为渲染：

Roses are flowers 
Violets are also flowers and wise mice slice rice 

Answer 1

我写了一个MarkDown覆盖图，用以下方式显示换行符：·（第一个空格为'''，第二个空格为'↵'）。例如：

Violets are flowers·↵ 
Roses are also flowers 

（有在第一线2个尾随空格。）

这里有一个演示，并链接到最近的源代码文件：（许可证：MIT）
http://www.debiki.com/-1c250-visualizing-markdown-double-space-line-breaks

用例：包括上述JS和CSS文件，以及：

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

源代码，从今天开始：CSS第一，然后JS：

------------ CSS: 

/** 
* Makes the CodeMirror editor show newlines, in Markdown mode. 
* 
* Copyright (C) 2013 Kaj Magnus Lindberg (born 1979) 
* 
* Licensed under the MIT license. 
*/ 

.cm-markdown-single-trailing-space-odd:before, 
.cm-markdown-single-trailing-space-even:before, 
.cm-markdown-line-break:before { 
    font-weight: bold; 
    color: hsl(30, 100%, 50%); /* a dark orange */ 
    position: absolute; 
} 


.cm-markdown-single-trailing-space-odd:before, 
.cm-markdown-single-trailing-space-even:before { 
    content: '·'; 
} 

.cm-markdown-line-break:before { 
    content: '↵'; 
} 

------------ JS: 

/** 
* Shows trailing Markdown spaces and line breaks, like so:·↵ 
* 
* Copyright (C) 2013 Kaj Magnus Lindberg (born 1979) 
* 
* License: (MIT) 
* 
* Permission is hereby granted, free of charge, to any person obtaining 
* a copy of this software and associated documentation files (the 
* "Software"), to deal in the Software without restriction, including 
* without limitation the rights to use, copy, modify, merge, publish, 
* distribute, sublicense, and/or sell copies of the Software, and to 
* permit persons to whom the Software is furnished to do so, subject to 
* the following conditions: 
* 
* The above copyright notice and this permission notice shall be 
* included in all copies or substantial portions of the Software. 
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 
* LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 
*/ 


CodeMirror.defineOption("showMarkdownLineBreaks", false, 
    function(codeMirror, newValue, oldValue) { 

    if (oldValue == CodeMirror.Init) { 
    oldValue = false; 
    } 
    if (oldValue && !newValue) { 
    codeMirror.removeOverlay("show-markdown-line-breaks"); 
    } 
    else if (!oldValue && newValue) { 
    codeMirror.addOverlay({ 
     name: "show-markdown-line-breaks", 
     token: markMarkdownTrailingSpaces 
    }); 
    } 
}); 


function markMarkdownTrailingSpaces(stream) { 

    // Possible stream.string:s and how they're handled: (`n` is text 
    // with no trailing spaces) 
    // "" 
    // "n" case 1 
    // "_" case 3 
    // "n_" case 1, case 3 
    // "__" case 2, case 3 
    // "n__" case 1, case 2, case 3 
    // "___" case 2, case 3 
    // "n___" case 1, case 2, case 3 

    // Returns separate CSS classes for each trailing space; 
    // otherwise CodeMirror merges contiguous spaces into 
    // one single <span>, and then I don't know how to via CSS 
    // replace each space with exact one '·'. 
    function singleTrailingSpace() { 
    return stream.pos % 2 == 0 ? 
     "markdown-single-trailing-space-even" : 
     "markdown-single-trailing-space-odd"; 
    }; 

    if (!stream.string.length) // can this happen? 
    return null; 

    // Case 1: Non-space characters. Eat until last non-space char. 
    var eaten = stream.match(/.*[^ ]/); 
    if (eaten) 
    return null; 

    // Case 2, more than one trailing space left before end-of-line. 
    // Match one space at a time, so each space gets its own 
    // `singleTrailingSpace()` CSS class. Look-ahead (`(?=`) for more spaces. 
    if (stream.match(/ (?= +$)/)) 
    return singleTrailingSpace(); 

    // Case 3: the very last char on this line, and it's a space. 
    // Count num trailing spaces up to including this last char on this line. 
    // If there are 2 spaces (or more), we have a line break. 
    var str = stream.string; 
    var len = str.length; 
    var twoTrailingSpaces = len >= 2 && str[len - 2] == ' '; 
    stream.eat(/./); 
    if (twoTrailingSpaces) 
    return "markdown-line-break"; 
    return singleTrailingSpace(); 
}; 


// vim: et ts=2 sw=2 list 

Answer 2

这里有一个简单的叠加，将样式尾随空白：

editorInstance.addOverlay({ 
    token: function(stream) { 
    if (stream.match(/^\s+$/)) return "trailing-whitespace"; 
    stream.match(/^\s*\S*/); 
    return null; 
    } 
}); 

然后添加一个CSS规则，这样做实际上可见：

.cm-trailing-whitespace { color: #f80; text-decoration: underline; }