JavaScript：用户输入的markdown到HTML的交互式WYSIWYG呈现

Question

我的目标是创建一个交互式文本框，用户可以在其中键入标记内容，并将其动态渲染为HTML。

所以：

`some text`

呈现给：

<code>some text</code>

并在用户输入的同一div 中显示，作为等宽文字some text。

到目前为止，我有一个div：

<div id="input" contenteditable="true"></div>

使用RxJS和showdown的脚本：

var converter = new showdown.Converter();
var inputArea = document.getElementById('input');

var keyupStream =
    Rx.Observable.fromEvent(inputArea, 'keyup')
        .debounceTime(700);

var contentStream = keyupStream.map(function() {
    return inputArea.innerHTML;
});

contentStream.subscribe(function(content)  {
    inputArea.innerHTML = converter.makeHtml(content);
    placeCaretAtEnd(inputArea);
});

（placeCaretAtEnd()来自here。）

这仅适用于最简单的情况。如果您输入上面的输入（`some text`），将正确呈现。那部分有效。

问题在于，从那时起，你会混合使用markdown和html以及渲染器barf，因为你将它传给了汤。

基本上，我需要一个更好的方法。一种显示WYSIWYG内容同时支持降价增量输入的方法。有什么想法吗？

单独的输入和输出文本区域很容易做到，而不是我想要的。