基于Python實現(xiàn)Markdown編輯器的示例詳解

更新時間：2025年08月04日 10:09:47 作者：Kyln.Wu

這篇文章主要為大家詳細介紹了如何基于Python實現(xiàn)Markdown編輯器,并且可以左邊寫 Markdown,右邊實時變成漂亮網(wǎng)頁,感興趣的小伙伴可以了解下

故事開場

深夜 11 點，你要給項目寫一份 README。

Typora 突然收費、VS Code 插件又卡頓，每次改一行都得 Ctrl+S → 切瀏覽器 → F5，循環(huán)十次，心態(tài)爆炸。

這時，你從桌面角落掏出“小白瑞士軍刀”——markdown_editor.py。

雙擊，彈出迷你雙欄窗口：左邊寫 Markdown，右邊實時變成漂亮網(wǎng)頁；寫完直接 Ctrl+S 導(dǎo)出 .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 框，綁定“內(nèi)容被修改”事件。

self.inputeditor = tk.Text(self, width=1, font=self.font)
self.inputeditor.bind("<<Modified>>", self.onChange)

每敲一個字，就觸發(fā) onChange，右邊立刻刷新。

功能塊 3：右邊實時預(yù)覽

用 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” 讀取現(xiàn)有 .md，“Save as” 導(dǎo)出成 .md 或 .txt。

filemenu.add_command(label="Open", command=self.openfile)
filemenu.add_command(label="Save as", command=self.savefile)

文件對話框自帶過濾，小白不會選錯格式。

如果還想更厲害

擴展點子 1：命令行批量轉(zhuǎn)換

把當(dāng)前目錄所有 .md 一鍵轉(zhuǎn) .html，適合批量發(fā)布博客。

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")

一行命令，整站靜態(tài)頁生成完畢。

擴展點子 2：加主題切換按鈕

給預(yù)覽區(qū)加“深色/淺色”按鈕，夜間護眼。

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轉(zhuǎn)PDF

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

import markdown
import pdfkit
import sys

args = sys.argv[1:]  # 收集命令行參數(shù)
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 可執(zhí)行文件（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))

表格、代碼塊、標(biāo)題樣式一次性到位。

功能塊 3：HTML 秒變 PDF

用 wkhtmltopdf 把網(wǎng)頁“打印”成 PDF，排版 100% 還原。

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

只要路徑正確，Windows、macOS、Linux 都能用。

如果還想更厲害

擴展點子 1：命令行加參數(shù)，一鍵換主題

加 --theme 參數(shù)，用不同 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 一鍵轉(zhuǎn) 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)