一個常見的在線 markdown 編輯器布局如下：

<div id='editor-column'>
    <textarea id="mdeditor">{{ content }}</textarea>
</div>

<!-- 預(yù)覽區(qū) -->
<div id='preview-column'>
    <div id="preview"></div>
</div>

打開后如下：

圖片

左邊是編輯區(qū)，右邊是預(yù)覽區(qū)。

現(xiàn)在需要在左邊輸入時，右邊預(yù)覽區(qū)實(shí)時更新，效果如下：

圖片

具體實(shí)現(xiàn)如下：
這里用到了 showdown 庫，github地址：https://github.com/showdownjs/showdown

$(function(){
    showdown.setOption('simpleLineBreaks', true);
    var converter = new showdown.Converter();

    // mdeditor 變化時，進(jìn)行轉(zhuǎn)換
    $('#mdeditor').on('input', function() {
        var to_html = converter.makeHtml($(this).val());
        $('#preview').html(to_html);
    });