在烧瓶窗体上生成markdown的预览

generate a preview of markdown on flask form

本文关键字：markdown 窗体      更新时间：2023-09-26

我正在尝试制作一个非常像这个文本框的界面，并在堆栈溢出问题表单上预览它下面的内容。我使用hoep来处理烧瓶后端的标记。以下是我的页面代码。

烧瓶

@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编译的渲染结果。

问题是，这只是太多的请求，而且速度太慢，因为帖子可能会很长，每次都会费力地浏览。_.debounce可能会有所帮助，但似乎仍然不是一个优雅的解决方案

如何以有效的方式实现这一点？

出于性能原因，您应该有一个客户端markdown渲染器来生成实时预览。表单提交后，您可以应用服务器端渲染器生成最终的HTML。

StackOverflow使用一个名为PageDown的库作为客户端渲染器。我已经编写了Flask PageDown扩展，它与Flask WTF集成，并为您提供了一个带有预览的新字段类型。

相关文章：