Javascript CodeMirror能否显示降价换行符？

能否告知降价模式下的CodeMirror显示换行符

示例：下面是一条带有两个尾随空格的降价线，意思是“我想在这里换行”。还有一行没有尾随空格，意思是“请不要换行”。但是，由于尾随空格是不可见的，因此如果a

或a

↵以指示将插入新行

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

这将导致：

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

下面是一个简单的覆盖，它将设置尾随空白的样式：

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; }

我写了一个降价覆盖图，用以下符号显示换行符：·↵  （a）“·”表示第一个空格，以及↵' 第二个空格）。例如：

Violets are flowers·↵
Roses are also flowers

（第一行有两个尾随空格。）

这里有一个演示和到最新源代码文件的链接：（许可证：MIT）




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

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

var codeMirrorEditor=codemirr.fromTextArea（一些textarea{
模式：“降价”，
showMarkdownLineBreaks:true，//好吧，你可以这样做。使用源代码，luke。@EliranMalka最后我写了一个CodeMirror插件。请看我在这页上的答案。也许最好不要触及降价模式本身-我必须合并来自master repo@Github的更改以保持最新。听起来是个好主意。d你能把它贡献回来吗？@EliranMalka我已经把源代码链接（麻省理工学院许可）和一个演示发送到Google邮件组，所以是的，我想我是这样做了。谢谢Marijn！我将在升级到CodeMirror 3后立即测试这个问题（似乎
。addOverlay
在我的版本中不存在，一些旧的2.x版本）。我现在已升级到3.13，并测试了[设置尾随空格样式的覆盖图]。我认为有点难以判断尾随空格是1还是2，因此我编写了另一个覆盖图，用专用标记设置每个空格的样式-请参见本页我自己的答案。（尾随空格重叠将所有尾随空格包装在一个单独的空格中，这使得很难单独设置每个空格的样式）请附上一个简明的示例（或代码中真正起作用的部分），以便有一个自包含的答案。@EliranMalka I添加了一个用法示例。
------------ 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