实现自己的 markdown 编辑器 —— 实时预览

一个常见的在线 markdown 编辑器布局如下：

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

<!-- 预览区 -->
<div id='preview-column'>
    <div id="preview"></div>
</div>

打开后如下：

图片

左边是编辑区，右边是预览区。

现在需要在左边输入时，右边预览区实时更新，效果如下：

图片

具体实现如下：
这里用到了 showdown 库，github地址：https://github.com/showdownjs/showdown

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

    // mdeditor 变化时，进行转换
    $('#mdeditor').on('input', function() {
        var to_html = converter.makeHtml($(this).val());
        $('#preview').html(to_html);
    });