flask 添加markdown支持

原创已于 2023-05-17 22:46:43 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flask #python #后端

于 2023-05-17 17:40:34 首次发布

Python 专栏收录该内容

39 篇文章

订阅专栏

该文章展示了如何在Flask博客项目中添加Markdown编辑和渲染功能，利用了editor.md这个开源库。通过在base.html和各个页面模板中引入CSS和JS文件，实现了Markdown内容的显示和编辑。用户可以创建、编辑和查看Markdown格式的博客文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flask 添加markdown支持

flask blog 演示项目

Documentation = https://flask.palletsprojects.com/tutorial/
中文Documentation = https://flask.net.cn/
源码 https://github.com/pallets/flask/tree/main/examples/tutorial

利用 editor.md 开源库

https://github.com/pandao/editor.md

下载
重命名为 editormd
放在 static 目录下

D:\workspace\Python\blog\flaskr\templates\base.html

<!doctype html>
<title>{% block title %}{% endblock %} - wmx web</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.css') }}"/> 
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.preview.css') }}"/>
<nav>
  <ul>
    <li><a href="{{ url_for('index') }}">Home</a></h1>
    {% if g.user %}
      <li><span>{{ g.user['username'] }}</span>
      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
    {% else %}
      <li><a href="{{ url_for('auth.register') }}">Register</a>
      <li><a href="{{ url_for('auth.login') }}">Log In</a>
    {% endif %}
  </ul>
</nav>
<section class="content">
  <header>
    {% block header %}{% endblock %}
  </header>
  {% for message in get_flashed_messages() %}
    <div class="flash">{{ message }}</div>
  {% endfor %}
  {% block content %}{% endblock %}
</section>

D:\workspace\Python\blog\flaskr\templates\blog\index.html

{% extends 'base.html' %}

{% block header %}
<h2>{% block title %}blogs{% endblock %}</h2>
{% if g.user %}
<a class="action" href="{{ url_for('blog.create') }}">New</a>
{% endif %}
{% endblock %}

{% block content %}
{% for post in posts %}
<article class="post">
  <header>
    <div>
      <h1>{{ post['title'] }}</h1>
      <div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%Y-%m-%d') }}</div>
    </div>
    {% if g.user['id'] == post['author_id'] %}
    <a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
    {% endif %}
  </header>

  <button onclick="showBody('{{ loop.index }}')">显示内容</button>

  <div id="{{ loop.index }}" style="height:0px;">
    <textarea class="body" style="display:none;" >
      {{ post.body }}
     </textarea>
  </div>

</article>
{% if not loop.last %}
<hr>
{% endif %}

<!---------------------------------------------- scripts ---------------------------------------------->
<script src="{{ url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/marked.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/prettify.min.js') }}"></script>

<script src="{{ url_for('static',filename='editormd/lib/raphael.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/underscore.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/sequence-diagram.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/flowchart.min.js') }}"></script>
<script src="{{ url_for('static',filename='editormd/lib/jquery.flowchart.min.js') }}"></script>

<script src="{{ url_for('static',filename='editormd/editormd.js') }}"></script>

<script type="text/javascript">
  $(function () {
    var objId = "{{ loop.index }}";
    testEditormdView = editormd.markdownToHTML(objId, {
      htmlDecode: "style,script,iframe",  // you can filter tags decode
      emoji: true,
      taskList: true,
      tex: true,  // 默认不解析
      flowChart: true,  // 默认不解析
      sequenceDiagram: true,  // 默认不解析
    });
  });
</script>


{% endfor %}



<script>
  function showBody(index) {
    var body = document.getElementById(index);
    if (body.style.height === '0px') {
        body.style.height = 'auto';
    } else {
        body.style.height = '0px';
    }
  }
</script>


{% endblock %}

D:\workspace\Python\blog\flaskr\templates\blog\create.html

{% extends 'base.html' %}

{% block header %}
  <h2>{% block title %}New Post{% endblock %}</h2>
{% endblock %}

{% block content %}
  <form method="post">
    <label for="title">Title</label>
    <input name="title" id="title" value="{{ request.form['title'] }}" required>
    <label for="body">Body</label>
    <div id="create-editormd">
      <textarea name="body" id="body">{{ request.form['body'] }}</textarea>
    </div>
    <input type="submit" value="Save">
  </form>

  <script src="{{ url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
  <script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("create-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "{{ url_for('static',filename='editormd/lib/') }}",
            // 上传图片
            imageUpload : true,
            imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],

        });
    });
</script>

{% endblock %}

D:\workspace\Python\blog\flaskr\templates\blog\update.html

{% extends 'base.html' %}

{% block header %}
  <h2>{% block title %}Edit "{{ post['title'] }}"{% endblock %}</h2>
{% endblock %}

{% block content %}
  <form method="post">
    <label for="title">Title</label>
    <input name="title" id="title" value="{{ request.form['title'] or post['title'] }}" required>
    <label for="body">Body</label>
    <div id="update-editormd">
      <textarea name="body" id="body">{{ request.form['body'] or post['body'] }}</textarea>
    </div>
    <input type="submit" value="Save">
  </form>
  <hr>
  <form action="{{ url_for('blog.delete', id=post['id']) }}" method="post">
    <input class="danger" type="submit" value="Delete" onclick="return confirm('Are you sure?');">
  </form>

  <script src="{{ url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
  <script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script>
<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("update-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "{{ url_for('static',filename='editormd/lib/') }}",
            // 上传图片
            imageUpload : true,
            imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
        });
    });
</script>

{% endblock %}