【python实用小脚本-169】『Python』所见即所得 Markdown 编辑器:写完即出网页预览——告别“写完→保存→刷新”三连

发布于:2025-08-04 ⋅ 阅读:(12) ⋅ 点赞:(0)

『Python』所见即所得 Markdown 编辑器:写完即出网页预览——告别“写完→保存→刷新”三连

Markdown, 实时预览, 小白编辑器, 一键导出, 瑞士军刀

故事开场:一把瑞士军刀救了熬夜写 README 的你

深夜 11 点,你要给项目写一份 README。
Typora 突然收费、VS Code 插件又卡顿,每次改一行都得 Ctrl+S → 切浏览器 → F5,循环十次,心态爆炸。
这时,你从桌面角落掏出“小白瑞士军刀”——markdown_editor.py
双击,弹出迷你双栏窗口:左边写 Markdown,右边实时变成漂亮网页;写完直接 Ctrl+S 导出 .md,三秒搞定。
痛点解决:再也不用“写-保存-刷新”三连,所见即所得,熬夜少一点。


完整代码速览(≤1000字符,直接展示)

#!/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")

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


总结

markdown_editor.py 这把瑞士军刀只有 60 行,却把“写作 + 预览 + 导出”三件事装进了一个轻量级窗口。
你双击即可写 README、写博客、写笔记,再也不用来回切换软件。
再加两行代码,就能批量转网页或一键换主题,小白也能玩出花。
下次写文档,记得先打开它,写完即发布,效率翻倍。

源码获取

完整代码已开源,包含详细的注释文档:
🔗 [GitCode仓库] https://gitcode.com/laonong-1024/python-automation-scripts
📥 [备用下载] https://pan.quark.cn/s/654cf649e5a6 提取码:f5VG


网站公告

今日签到

点亮在社区的每一天
去签到