使用jquery实现markdown预览


快速导航

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

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

前端

 1<script type="text/javascript">
 2function previewTopicContent(){
 3    $.getJSON("{{ url_for('blog.preview') }}", {
 4        content: $("#content").val(),
 5    }, function(data) {
 6        $("#showPreview").html(data.result);
 7    });
 8   /*setTimeout('previewTopicContent()',300);*/
 9};
10</script>

或者

1function previewTopicContent(){
2    $.get("{{ url_for('blog.preview') }}", {
3        content: $("#content").val(),
4    }, function(data) {
5        $("#showPreview").html(data);
6    });
7};

服务端

1@site.route('/pages/preview')
2def preview():
3    from misaka import Markdown, HtmlRenderer
4    from flask import jsonify
5    content = request.args.get('content')
6    html = HtmlRenderer()
7    markdown = Markdown(html)
8    return jsonify(result=Markup(markdown(content)))

或者

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

加载评论