使用 Flask 3 和 Mistune 2 实现在线编辑 Markdown 文档的 Web 服务

实现思路

以下是使用 Flask 3 + Mistune 2 实现与 app2.js 相同功能的 Python Web 服务，包含 Markdown 解析（支持代码高亮、Mermaid、表格、公式）、文档保存/加载/列表查询等核心功能：

1. 先安装依赖

pip install flask==3.0.3 mistune==2.0.5 pygments python-multipart python-dotenv 

2. 完整代码（app.py）

# -*- coding: utf-8 -*-
""" Markdown 在线编辑器 (支持表格/公式/Mermaid) """
import os
import json
from pathlib import Path
import mistune
from mistune.renderers import HTMLRenderer
from mistune.plugins import table, task_lists, footnotes
from pygments import highlight
from pygments.lexers import get_lexer_by_name, guess_lexer
from pygments.formatters import HtmlFormatter
from flask import Flask, render_template, request, jsonify, send_from_directory

# 初始化 Flask 应用
app = Flask(__name__, static_url_path='/', static_folder='public', template_folder='views')

# 配置
app.config['JSON_AS_ASCII'] = False

DOCS_DIR = Path(__file__).parent / 'docs'
DOCS_DIR.mkdir(exist_ok=True)

# ---- Markdown 解析配置 ----
# 自定义代码高亮渲染器（支持 Mermaid/代码高亮）
class CustomRenderer(HTMLRenderer):
    def block_code(self, code, info=None):
        # 处理 Mermaid 代码块
        if info and info.strip() == 'mermaid':
            return f'<div>{mistune.escape(code)}</div>'
        # 处理普通代码块高亮
        try:
            lexer = get_lexer_by_name(info.strip())  info  guess_lexer(code)
        :
            lexer = guess_lexer(code)
        formatter = HtmlFormatter(noclasses=, cssclass=, linenos=)
        highlighted = highlight(code, lexer, formatter)
         


markdown_parser = mistune.create_markdown(
    renderer=CustomRenderer(),
    plugins=[, , ],
    escape=
)



 ():
     render_template(, title=)


 ():
    :
        data = request.get_json()
        markdown = data.get(, )
          markdown:
             jsonify({: }), 
        html = markdown_parser(markdown)
         jsonify({: html})
     Exception  e:
         jsonify({: }), 


 ():
    :
        data = request.get_json()
        filename = data.get(, ).strip()
        content = data.get(, ).strip()
          filename   content:
             jsonify({: }), 
        file_path = DOCS_DIR / 
         (file_path, , encoding=)  f:
            f.write(content)
         jsonify({: , : , : (file_path)})
     Exception  e:
         jsonify({: }), 


 ():
    :
        file_path = DOCS_DIR / 
          file_path.exists():
             jsonify({: }), 
         (file_path, , encoding=)  f:
            content = f.read()
         jsonify({: , : content})
     Exception  e:
         jsonify({: }), 


 ():
    :
        docs = []
         file  DOCS_DIR.glob():
            docs.append({: file.stem, : (file)})
         jsonify({: , : docs})
     Exception  e:
         jsonify({: }), 


 ():
     send_from_directory(, path)

 __name__ == :
    app.run(host=, port=, debug=)

3. 目录结构说明

需要和原 Node.js 版本保持一致的目录结构，确保前端页面能正常加载：

TREE /F md-editor
├── app.py
├── docs/
│   └── demo.md
├── public/
│   ├── js/
│   │   ├── mermaid.min.js
│   │   └── highlight.min.js
│   └── css/
│       └── github-dark.min.css
└── views/
    └── editor.html

4. 核心功能说明

1. Markdown 解析：
   • 使用 mistune 2 作为核心解析器，兼容 GFM 规范
   • 自定义渲染器支持 Mermaid 代码块（输出 <div>）
   • 使用 Pygments 实现代码高亮（兼容 highlight.js 样式）
   • 启用表格、任务列表、脚注等扩展
2. API 接口：
   • /api/parse：POST 请求，解析 Markdown 为 HTML
   • /api/save：POST 请求，保存 Markdown 文档
   • /api/load/<filename>：GET 请求，加载指定文档
   • /api/docs：GET 请求，获取所有文档列表
3. 前端兼容：
   • 静态资源路径、接口地址与原 Node.js 版本完全一致
   • 复用原 editor.html 前端页面，只需修改一行

     cd public\css
     rename editor.ejs editor.html
     

     修改第 6 行：<title>{{ title }}</title>

5. 运行方式

直接运行

python app.py

生产环境建议用 Gunicorn

gunicorn -w 4 -b 0.0.0.0:8000 app:app

6. 关键注意事项

1. 静态资源：需要将原 Node.js 版本中 public 目录下的 js/mermaid.min.js、js/highlight.min.js、css/github-dark.min.css 复制到 Python 项目的 public 目录中。
2. 公式渲染：数学公式渲染仍由前端 KaTeX 处理，服务端仅负责 Markdown 解析，与原逻辑一致。
3. 编码：所有文件读写均使用 UTF-8 编码，确保中文正常显示。
4. 兼容性：接口返回格式与原 Node.js 版本完全一致，前端无需任何修改即可对接。

该实现完整复刻了原 Node.js 版本的所有核心功能，同时符合 Python/Flask 的开发规范，可直接替换原服务端使用。