使用jquery实现markdown预览


虽然算不上是实时预览
实时预览功能等有时间在把它加上

还是把实时预览加上,不过实时预览可能会对网站有所影响,读者看着加上

前端

<script type="text/javascript">
function previewTopicContent(){
    $.getJSON("{{ url_for('blog.preview') }}", {
        content: $("#content").val(),
    }, function(data) {
        $("#showPreview").html(data.result);
    });
   /*setTimeout('previewTopicContent()',300);*/
};
</script>

或者

function previewTopicContent(){
    $.get("{{ url_for('blog.preview') }}", {
        content: $("#content").val(),
    }, function(data) {
        $("#showPreview").html(data);
    });
};

服务端

@site.route('/pages/preview')
def preview():
    from misaka import Markdown, HtmlRenderer
    from flask import jsonify
    content = request.args.get('content')
    html = HtmlRenderer()
    markdown = Markdown(html)
    return jsonify(result=Markup(markdown(content)))

或者

def preview():
    from misaka import Markdown, HtmlRenderer
    content = request.args.get('content')
    html = HtmlRenderer()
    markdown = Markdown(html)
    return Markup(markdown(content))
作者: honmaple
链接: https://honmaple.me/articles/2016/02/使用jquery实现markdown预览.html
版权: CC BY-NC-SA 4.0 知识共享署名-非商业性使用-相同方式共享4.0国际许可协议
wechat
alipay

加载评论