在Flask表单中生成Markdown预览

Question

我想做一个界面，像下面这个文本框和预览一样，出现在Stack Overflow的问题表单上。我在我的Flask后端使用hoep来处理标记。以下是我页面的代码。

Flask

@bp.route('/write', methods=['GET', 'POST'])
@login_required
def write():
    form = WritePostForm()
    if form.validate_on_submit():
        extensions = hoep.EXT_FENCED_CODE
        html = hoep.render(form.text.data, extensions)
        p = Post(
            title=form.title.data,
            body=html,
            author=current_user._get_current_object()
        )
        db.session.add(p)
        db.session.commit()
        return redirect(url_for('posts.post', post_id=p.id))
    return render_template("post/write.html", form=form)

不过，在我填写表单的时候，我希望能生成一个预览，就像hoep渲染出来的效果。

我想到的直接解决办法是，在某种$('input').change事件下向服务器发送请求，然后返回hoep编译后的渲染结果。

问题是，这样会产生太多请求，而且速度会很慢，因为帖子可能会很长，每次都让hoep去处理这些内容。虽然_.debounce可能会稍微改善一下，但看起来还是不太优雅的解决方案。

那么，有什么更高效的实现方法呢？

Answer 1

为了提高性能，你应该在用户的浏览器里使用一个Markdown渲染器，这样可以实时显示预览效果。当用户提交表单后，再用服务器端的渲染器来生成最终的HTML代码。

StackOverflow使用了一个叫做PageDown的库来实现客户端的渲染。我还写了一个Flask-PageDown扩展，它可以和Flask-WTF结合使用，提供一个新的字段类型，并且带有预览功能。