基于Python实现Markdown编辑器的示例详解_Python

故事开场

深夜 11 点，你要给项目写一份 readme。

typora 突然收费、vs code 插件又卡顿，每次改一行都得 ctrl+s → 切浏览器 → f5，循环十次，心态爆炸。

这时，你从桌面角落掏出“小白瑞士军刀”——markdown_editor.py。

双击，弹出迷你双栏窗口：左边写 markdown，右边实时变成漂亮网页；写完直接 ctrl+s 导出 .md，三秒搞定。

痛点解决：再也不用“写-保存-刷新”三连，所见即所得，熬夜少一点。

完整代码速览

#!/usr/bin/python
# -*- coding: utf-8 -*-
import tkinter as tk
from tkinter import font, filedialog, messagebox as mbox
from markdown2 import markdown
from tkhtmlview import htmllabel

class window(tk.frame):
    def __init__(self, master=none):
        super().__init__(master)
        self.master = master
        self.font = font.font(family="helvetica", size=14)
        self.init_window()

    def onchange(self, event):
        self.inputeditor.edit_modified(0)
        md2html = markdown()
        self.outputbox.set_html(md2html.convert(
            self.inputeditor.get("1.0", tk.end)))

    def openfile(self):
        filename = filedialog.askopenfilename(
            filetypes=[("markdown", "*.md"), ("text", "*.txt"), ("all", "*.*")])
        if filename:
            try:
                self.inputeditor.delete("1.0", tk.end)
                self.inputeditor.insert(tk.end, open(filename, "r").read())
            except exception:
                mbox.showerror("error", f"{filename} cannot be opened!")

    def savefile(self):
        filedata = self.inputeditor.get("1.0", tk.end)
        filename = filedialog.asksaveasfilename(
            defaultextension=".md",
            filetypes=[("markdown", "*.md"), ("text", "*.txt")])
        if filename:
            open(filename, "w").write(filedata)

    def init_window(self):
        self.master.title("markdown viewer")
        self.pack(fill=tk.both, expand=1)
        menu = tk.menu(self)
        filemenu = tk.menu(menu, tearoff=0)
        filemenu.add_command(label="open", command=self.openfile)
        filemenu.add_command(label="save as", command=self.savefile)
        filemenu.add_separator()
        filemenu.add_command(label="exit", command=self.quit)
        menu.add_cascade(label="file", menu=filemenu)
        self.master.config(menu=menu)

        self.inputeditor = tk.text(self, width=1, font=self.font)
        self.inputeditor.pack(fill=tk.both, expand=1, side=tk.left)
        self.inputeditor.bind("<<modified>>", self.onchange)

        self.outputbox = htmllabel(self, width=1, background="white",
                                   html="<h1>markdown editor</h1>")
        self.outputbox.pack(fill=tk.both, expand=1, side=tk.right)

root = tk.tk()
root.geometry("750x600")
window(root)
root.mainloop()

代码解析

功能块 1：搭一个左右分栏的窗口

像搭积木一样，先放左右两块“写字板”。

root = tk.tk()
root.geometry("750x600")

750x600 固定大小，防止小白把窗口拉得面目全非。

功能块 2：左边写 markdown

左边就是普通的 text 框，绑定“内容被修改”事件。

self.inputeditor = tk.text(self, width=1, font=self.font)
self.inputeditor.bind("<<modified>>", self.onchange)

每敲一个字，就触发 onchange，右边立刻刷新。

功能块 3：右边实时预览

用 markdown2 把 markdown 秒变 html，再用 htmllabel 显示。

def onchange(self, event):
    md2html = markdown()
    self.outputbox.set_html(md2html.convert(
        self.inputeditor.get("1.0", tk.end)))

所见即所得，连表格、代码高亮都能实时渲染。

功能块 4：一键打开/保存

菜单栏放两个按钮，“open” 读取现有 .md，“save as” 导出成 .md 或 .txt。

filemenu.add_command(label="open", command=self.openfile)
filemenu.add_command(label="save as", command=self.savefile)

文件对话框自带过滤，小白不会选错格式。

如果还想更厉害

扩展点子 1：命令行批量转换

把当前目录所有 .md 一键转 .html，适合批量发布博客。

import glob, pathlib, markdown2
for md in glob.glob("*.md"):
    html = markdown2.markdown_path(md)
    pathlib.path(md.replace(".md", ".html")).write_text(html, encoding="utf-8")

一行命令，整站静态页生成完毕。

扩展点子 2：加主题切换按钮

给预览区加“深色/浅色”按钮，夜间护眼。

themes = {"light": "white", "dark": "#1e1e1e"}
current = "light"
def toggle_theme():
    global current
    current = "dark" if current == "light" else "light"
    outputbox.config(background=themes[current])
tk.button(root, text="换肤", command=toggle_theme).pack(side="bottom")

点一下，整个右边窗口立刻变暗，熬夜更舒服。

知识延展

python markdown转pdf

完整代码（≤1000字符，直接展示）

import markdown
import pdfkit
import sys

args = sys.argv[1:]  # 收集命令行参数
assert args, "no file/dir was provided"

html_texts = []
for arg in args:
    with open(arg, "r", encoding="utf-8") as f:
        md = f.read()
    html_texts.append(markdown.markdown(md))

# 指向 wkhtmltopdf 可执行文件（windows 示例）
config = pdfkit.configuration(
    wkhtmltopdf=r"c:\program files\wkhtmltopdf\bin\wkhtmltopdf.exe")

for idx, html in enumerate(html_texts):
    filename = args[idx].rsplit('.', 1)[0]  # 去掉扩展名
    pdfkit.from_string(html, f'{filename}.pdf', configuration=config)

代码解析

功能块 1：命令行接收文件

像快递小哥一样，脚本在门口等你把 .md 文件扔进来。

args = sys.argv[1:]
assert args, "no file/dir was provided"

支持一次拖多个文件：python markdown_to_pdf.py readme.md blog.md

功能块 2：markdown 秒变 html

把 markdown 语法翻译成浏览器能看懂的 html，就像把方言翻译成普通话。

html_texts.append(markdown.markdown(md))

表格、代码块、标题样式一次性到位。

功能块 3：html 秒变 pdf

用 wkhtmltopdf 把网页“打印”成 pdf，排版 100% 还原。

pdfkit.from_string(html, f'{filename}.pdf', configuration=config)

只要路径正确，windows、macos、linux 都能用。

如果还想更厉害

扩展点子 1：命令行加参数，一键换主题

加 --theme 参数，用不同 css 模板。

import argparse
parser = argparse.argumentparser()
parser.add_argument("--theme", default="github.css")
args = parser.parse_args()
css = open(args.theme).read()
html = f"<style>{css}</style>" + markdown.markdown(md)

运行：

python markdown_to_pdf.py readme.md --theme dark.css

扩展点子 2：批量文件夹

把某个文件夹所有 .md 一键转 pdf。

import glob
for md_path in glob.glob("docs/*.md"):
    with open(md_path, encoding="utf-8") as f:
        html = markdown.markdown(f.read())
    pdfkit.from_string(html, md_path.replace(".md", ".pdf"), configuration=config)