中級者向け No.36

Markdownエディタ（プレビュー付き）

左にMarkdown入力・右にHTMLプレビューを表示するMarkdownエディタ。markdownライブラリとHTMLウィジェットを学びます。

🎯 難易度: ★★☆ 📦 ライブラリ: tkinter（標準ライブラリ）, markdown2 ⏱️ 制作時間: 30〜90分
📋 目次

1. アプリ概要

左にMarkdown入力・右にHTMLプレビューを表示するMarkdownエディタ。markdownライブラリとHTMLウィジェットを学びます。

このアプリは中級カテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter（標準ライブラリ）・markdown2 で、難易度は ★★☆ です。

このアプリは「ユーティリティ」カテゴリです。小回りの効くユーティリティは Python の真骨頂で、汎用的なユーザー操作を組み合わせる発想が他のアプリにもそのまま流用できます。tkinter（標準ライブラリ）・markdown2 を活かして実装するこの構造は、他のアプリにも応用が効きます。

動かしながら読むことが理解の最短経路です。まずはコードをコピーして実行し、想定どおりに動くことを確認したうえで解説と照らし合わせてください。

カスタマイズでは「機能追加」「UI 改善」「エラー耐性」の三方向で考えると視野が広がります。練習問題にもそれぞれの方向の具体例を用意しています。

Markdownエディタ（プレビュー付き） 実行画面（Windows）
実行画面（Windows）
Markdownエディタ（プレビュー付き） 実行画面（Linux Mint）
実行画面（Linux Mint）

2. 機能一覧

  • ループで生成するボタン群（それぞれ _open_file()・_save_file()・_save_as_file() を実行）
  • イベント <<ComboboxSelected>> から _load_sample() を実行
  • キー <KeyRelease> から _on_key() を実行
  • filedialog.askopenfilename() によるファイル選択ダイアログ
  • filedialog.asksaveasfilename() によるファイル選択ダイアログ
  • messagebox.showerror() によるダイアログ通知
  • ウィンドウはタイトル「Markdownエディタ（プレビュー付き）」・サイズ 1100x700 で起動

3. 事前準備・環境

ℹ️
動作確認環境

Python 3.10 以上 / Windows 11（実機）で起動・基本操作を確認 ／ Linux Mint 22.3（仮想マシン）で起動・画面表示を確認（macOS は未検証）

Windows 11（実機）で起動と基本操作を確認しています（全機能の網羅テストではありません）。Linux Mint 22.3（仮想マシン）では起動と画面表示を確認しました。macOS は必要なライブラリ（pip install）を入れれば動作する想定ですが、未検証です。

  • Python 3.10 以上
  • OS: Windows 11（実機で起動・基本操作を確認）・Linux Mint 22.3（仮想マシンで起動・画面表示を確認）

4. 完全なソースコード

💡
コードのコピー方法

右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。

📦 必要なライブラリをインストール（初回のみ）
pip install markdown tkinterweb
app36.py
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import os
import re

try:
    import markdown
    MD_AVAILABLE = True
except ImportError:
    MD_AVAILABLE = False

try:
    import tkinterweb
    TKWEB_AVAILABLE = True
except ImportError:
    TKWEB_AVAILABLE = False


class App36:
    """Markdownエディタ（プレビュー付き）"""

    SAMPLES = {
        "基本サンプル": """\
# Markdownエディタ

## 見出し

### 小見出し

通常のテキスト。**太字** や *斜体* が使えます。

## リスト

- 項目1
- 項目2
  - ネスト項目
- 項目3

1. 番号付きリスト
2. 2番目
3. 3番目

## コード

インラインコード: `print("Hello")`

```python
def hello(name):
    return f"Hello, {name}!"

print(hello("World"))
```

## リンクと画像

[Python公式](https://www.python.org)

## テーブル

| 名前 | 年齢 | 職業 |
|------|------|------|
| 田中 | 25   | エンジニア |
| 鈴木 | 30   | デザイナー |

## 引用

> これは引用です。
> 複数行も可能。

---

水平線の上下に区切り線が表示されます。
""",
        "README テンプレート": """\
# プロジェクト名

## 概要

プロジェクトの概要を記述してください。

## インストール

```bash
pip install プロジェクト名
```

## 使い方

```python
import プロジェクト名

# 使用例
```

## 機能

- 機能1
- 機能2
- 機能3

## ライセンス

MIT License
""",
    }

    CSS = """\
<style>
body { font-family: 'Segoe UI', sans-serif; max-width: 800px; margin: 0 auto;
       padding: 20px; line-height: 1.6; color: #333; }
h1,h2,h3,h4 { color: #0d47a1; }
h1 { border-bottom: 2px solid #0d47a1; padding-bottom: 8px; }
h2 { border-bottom: 1px solid #ddd; padding-bottom: 4px; }
code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px;
       font-family: Consolas, monospace; font-size: 0.9em; }
pre { background: #1e1e1e; color: #d4d4d4; padding: 16px;
      border-radius: 8px; overflow-x: auto; }
pre code { background: none; color: inherit; }
blockquote { border-left: 4px solid #0d47a1; margin: 0;
             padding-left: 16px; color: #555; }
table { border-collapse: collapse; width: 100%; }
th { background: #0d47a1; color: white; padding: 8px 12px; }
td { border: 1px solid #ddd; padding: 8px 12px; }
tr:nth-child(even) { background: #f9f9f9; }
a { color: #1565c0; }
hr { border: none; border-top: 2px solid #ddd; }
</style>
"""

    def __init__(self, root):
        self.root = root
        self.root.title("Markdownエディタ（プレビュー付き）")
        self.root.geometry("1100x700")
        self.root.minsize(1100, 700)
        self.root.configure(bg="#1e1e1e")
        self._current_file = None
        self._modified = False
        self._build_ui()
        self._load_sample("基本サンプル")

    def _build_ui(self):
        # ツールバー
        toolbar = tk.Frame(self.root, bg="#252526", pady=4)
        toolbar.pack(fill=tk.X)
        tk.Label(toolbar, text="📝 Markdownエディタ",
                 font=("Noto Sans JP", 12, "bold"),
                 bg="#252526", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)

        # サンプル
        tk.Label(toolbar, text="サンプル:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.LEFT, padx=(16, 4))
        self.sample_var = tk.StringVar()
        sample_cb = ttk.Combobox(toolbar, textvariable=self.sample_var,
                                  values=list(self.SAMPLES.keys()),
                                  state="readonly", width=18)
        sample_cb.pack(side=tk.LEFT)
        sample_cb.bind("<<ComboboxSelected>>",
                       lambda e: self._load_sample(self.sample_var.get()))

        # ボタン
        for text, cmd in [("📂 開く", self._open_file),
                           ("💾 保存", self._save_file),
                           ("💾 別名保存", self._save_as_file)]:
            tk.Button(toolbar, text=text, command=cmd,
                      bg="#3c3c3c", fg="white", relief=tk.FLAT,
                      font=("Arial", 9), padx=8, pady=3,
                      activebackground="#505050", bd=0).pack(side=tk.LEFT, padx=4)

        # ビューモード
        tk.Label(toolbar, text="表示:", bg="#252526", fg="#ccc",
                 font=("Arial", 9)).pack(side=tk.RIGHT, padx=4)
        self.view_mode = tk.StringVar(value="split")
        for val, lbl in [("edit", "編集"), ("split", "分割"), ("preview", "プレビュー")]:
            ttk.Radiobutton(toolbar, text=lbl, variable=self.view_mode,
                            value=val,
                            command=self._change_view_mode
                            ).pack(side=tk.RIGHT, padx=2)

        if not MD_AVAILABLE:
            tk.Label(self.root,
                     text="⚠ markdown が未インストール (pip install markdown)。"
                          "簡易テキストプレビューになります。",
                     bg="#fff3cd", fg="#856404", font=("Arial", 9),
                     anchor="w", padx=8).pack(fill=tk.X)

        # メインエリア
        self.main_paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
        self.main_paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)

        # 左: エディタ
        self.edit_frame = tk.Frame(self.main_paned, bg="#1e1e1e")
        self.main_paned.add(self.edit_frame, weight=1)

        # 行番号
        num_frame = tk.Frame(self.edit_frame, bg="#1e1e1e")
        num_frame.pack(fill=tk.BOTH, expand=True)
        self.line_nums = tk.Text(num_frame, width=4, bg="#252526",
                                  fg="#858585", font=("Courier New", 12),
                                  state=tk.DISABLED, relief=tk.FLAT,
                                  padx=4, pady=4, takefocus=0)
        self.line_nums.pack(side=tk.LEFT, fill=tk.Y)
        self.editor = tk.Text(num_frame, bg="#1e1e1e", fg="#d4d4d4",
                               font=("Courier New", 12), insertbackground="#aeafad",
                               relief=tk.FLAT, undo=True, padx=8, pady=4,
                               selectbackground="#264f78",
                               wrap=tk.WORD)
        ed_sb = ttk.Scrollbar(num_frame, command=self._scroll_editor)
        self.editor.configure(yscrollcommand=ed_sb.set)
        ed_sb.pack(side=tk.RIGHT, fill=tk.Y)
        self.editor.pack(fill=tk.BOTH, expand=True)
        self.editor.bind("<KeyRelease>", self._on_key)
        self._setup_editor_tags()

        # 右: プレビュー
        self.preview_frame = tk.Frame(self.main_paned, bg="#ffffff")
        self.main_paned.add(self.preview_frame, weight=1)

        if TKWEB_AVAILABLE:
            self.html_viewer = tkinterweb.HtmlFrame(
                self.preview_frame, messages_enabled=False)
            self.html_viewer.pack(fill=tk.BOTH, expand=True)
        else:
            # フォールバック: Text widget
            self.preview_text = tk.Text(
                self.preview_frame, bg="#ffffff", fg="#333",
                font=("Arial", 12), relief=tk.FLAT, wrap=tk.WORD,
                state=tk.DISABLED, padx=12, pady=12)
            pr_sb = ttk.Scrollbar(self.preview_frame,
                                   command=self.preview_text.yview)
            self.preview_text.configure(yscrollcommand=pr_sb.set)
            pr_sb.pack(side=tk.RIGHT, fill=tk.Y)
            self.preview_text.pack(fill=tk.BOTH, expand=True)
            self._setup_preview_tags()

        # ステータス
        self.status_var = tk.StringVar(value="準備完了")
        tk.Label(self.root, textvariable=self.status_var,
                 bg="#252526", fg="#858585", font=("Arial", 9),
                 anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)

    def _setup_editor_tags(self):
        # Markdown構文色付け
        self.editor.tag_configure("heading", foreground="#4fc3f7",
                                   font=("Courier New", 13, "bold"))
        self.editor.tag_configure("bold", foreground="#ffffff",
                                   font=("Courier New", 12, "bold"))
        self.editor.tag_configure("italic", foreground="#ce9178",
                                   font=("Courier New", 12, "italic"))
        self.editor.tag_configure("code", foreground="#4ec9b0",
                                   background="#2d2d30")
        self.editor.tag_configure("link", foreground="#569cd6")
        self.editor.tag_configure("list_item", foreground="#dcdcaa")
        self.editor.tag_configure("quote", foreground="#6a9955")
        self.editor.tag_configure("hr", foreground="#555555")

    def _setup_preview_tags(self):
        self.preview_text.tag_configure("h1", font=("Arial", 20, "bold"),
                                         foreground="#0d47a1",
                                         spacing3=8)
        self.preview_text.tag_configure("h2", font=("Arial", 16, "bold"),
                                         foreground="#1565c0",
                                         spacing3=6)
        self.preview_text.tag_configure("h3", font=("Arial", 14, "bold"),
                                         foreground="#1976d2")
        self.preview_text.tag_configure("code_inline",
                                         font=("Courier New", 11),
                                         background="#f4f4f4")
        self.preview_text.tag_configure("code_block",
                                         font=("Courier New", 11),
                                         background="#1e1e1e",
                                         foreground="#d4d4d4",
                                         spacing1=4, spacing3=4)
        self.preview_text.tag_configure("bold_text",
                                         font=("Arial", 12, "bold"))
        self.preview_text.tag_configure("italic_text",
                                         font=("Arial", 12, "italic"))
        self.preview_text.tag_configure("quote_text",
                                         foreground="#555555",
                                         lmargin1=20, lmargin2=20)
        self.preview_text.tag_configure("bullet",
                                         foreground="#0d47a1")

    def _scroll_editor(self, *args):
        self.editor.yview(*args)
        self.line_nums.yview(*args)

    def _on_key(self, event=None):
        self._update_line_nums()
        self._highlight_md()
        self._update_preview()
        self._modified = True
        lines = int(self.editor.index(tk.END).split(".")[0]) - 1
        chars = len(self.editor.get("1.0", tk.END)) - 1
        self.status_var.set(f"行: {lines}  文字: {chars}")

    def _update_line_nums(self):
        content = self.editor.get("1.0", tk.END)
        lines = content.count("\n")
        self.line_nums.config(state=tk.NORMAL)
        self.line_nums.delete("1.0", tk.END)
        self.line_nums.insert("1.0", "\n".join(str(i) for i in range(1, lines + 1)))
        self.line_nums.config(state=tk.DISABLED)

    def _highlight_md(self):
        content = self.editor.get("1.0", tk.END)
        for tag in ["heading", "bold", "italic", "code", "link",
                    "list_item", "quote", "hr"]:
            self.editor.tag_remove(tag, "1.0", tk.END)
        patterns = [
            ("heading",   r"^#{1,6} .+$"),
            ("code",      r"`[^`\n]+`"),
            ("bold",      r"\*\*[^*\n]+\*\*"),
            ("italic",    r"\*[^*\n]+\*"),
            ("link",      r"\[.*?\]\(.*?\)"),
            ("list_item", r"^[\s]*[-*+] .+$"),
            ("list_item", r"^\d+\. .+$"),
            ("quote",     r"^> .+$"),
            ("hr",        r"^[-*_]{3,}$"),
        ]
        for tag, pattern in patterns:
            for m in re.finditer(pattern, content, re.MULTILINE):
                start = f"1.0+{m.start()}c"
                end = f"1.0+{m.end()}c"
                self.editor.tag_add(tag, start, end)

    def _update_preview(self):
        content = self.editor.get("1.0", tk.END)
        if TKWEB_AVAILABLE:
            if MD_AVAILABLE:
                html = markdown.markdown(
                    content,
                    extensions=["tables", "fenced_code", "codehilite", "nl2br"])
            else:
                html = self._simple_md(content)
            full_html = f"<html><head>{self.CSS}</head><body>{html}</body></html>"
            self.html_viewer.load_html(full_html)
        else:
            # フォールバック
            self.preview_text.config(state=tk.NORMAL)
            self.preview_text.delete("1.0", tk.END)
            self._render_preview_text(content)
            self.preview_text.config(state=tk.DISABLED)

    def _simple_md(self, text):
        """markdownライブラリなしの簡易変換"""
        lines = text.split("\n")
        html_lines = []
        in_code = False
        for line in lines:
            if line.startswith("```"):
                if in_code:
                    html_lines.append("</pre>")
                    in_code = False
                else:
                    html_lines.append("<pre><code>")
                    in_code = True
            elif in_code:
                html_lines.append(line)
            elif re.match(r"^######", line):
                html_lines.append(f"<h6>{line[7:]}</h6>")
            elif re.match(r"^#####", line):
                html_lines.append(f"<h5>{line[6:]}</h5>")
            elif re.match(r"^####", line):
                html_lines.append(f"<h4>{line[5:]}</h4>")
            elif re.match(r"^###", line):
                html_lines.append(f"<h3>{line[4:]}</h3>")
            elif re.match(r"^##", line):
                html_lines.append(f"<h2>{line[3:]}</h2>")
            elif re.match(r"^#", line):
                html_lines.append(f"<h1>{line[2:]}</h1>")
            elif re.match(r"^[-*+] ", line):
                html_lines.append(f"<li>{line[2:]}</li>")
            elif re.match(r"^> ", line):
                html_lines.append(f"<blockquote>{line[2:]}</blockquote>")
            elif re.match(r"^[-*_]{3,}$", line):
                html_lines.append("<hr>")
            else:
                l = re.sub(r"\*\*(.+?)\*\*", r"<strong>\1</strong>", line)
                l = re.sub(r"\*(.+?)\*", r"<em>\1</em>", l)
                l = re.sub(r"`(.+?)`", r"<code>\1</code>", l)
                l = re.sub(r"\[(.+?)\]\((.+?)\)", r'<a href="\2">\1</a>', l)
                html_lines.append(f"<p>{l}</p>" if l else "")
        return "\n".join(html_lines)

    def _render_preview_text(self, content):
        """tkinterweb未使用時のフォールバックプレビュー"""
        for line in content.split("\n"):
            if re.match(r"^# ", line):
                self.preview_text.insert(tk.END, line[2:] + "\n", "h1")
            elif re.match(r"^## ", line):
                self.preview_text.insert(tk.END, line[3:] + "\n", "h2")
            elif re.match(r"^### ", line):
                self.preview_text.insert(tk.END, line[4:] + "\n", "h3")
            elif re.match(r"^[-*+] ", line):
                self.preview_text.insert(tk.END, "• " + line[2:] + "\n", "bullet")
            elif re.match(r"^> ", line):
                self.preview_text.insert(tk.END, "  " + line[2:] + "\n", "quote_text")
            else:
                self.preview_text.insert(tk.END, line + "\n")

    def _change_view_mode(self):
        mode = self.view_mode.get()
        # ペインを作り直す
        for item in self.main_paned.panes():
            self.main_paned.forget(item)
        if mode == "edit":
            self.main_paned.add(self.edit_frame, weight=1)
        elif mode == "preview":
            self.main_paned.add(self.preview_frame, weight=1)
        else:
            self.main_paned.add(self.edit_frame, weight=1)
            self.main_paned.add(self.preview_frame, weight=1)

    def _load_sample(self, name):
        content = self.SAMPLES.get(name, "")
        self.editor.delete("1.0", tk.END)
        self.editor.insert("1.0", content)
        self._on_key()

    def _open_file(self):
        path = filedialog.askopenfilename(
            filetypes=[("Markdown", "*.md *.markdown *.txt"),
                       ("すべて", "*.*")])
        if path:
            try:
                with open(path, encoding="utf-8") as f:
                    content = f.read()
                self.editor.delete("1.0", tk.END)
                self.editor.insert("1.0", content)
                self._current_file = path
                self._modified = False
                self._on_key()
                self.root.title(f"Markdownエディタ — {os.path.basename(path)}")
            except Exception as e:
                messagebox.showerror("エラー", str(e))

    def _save_file(self):
        if self._current_file:
            self._write_file(self._current_file)
        else:
            self._save_as_file()

    def _save_as_file(self):
        path = filedialog.asksaveasfilename(
            defaultextension=".md",
            filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt"),
                       ("すべて", "*.*")])
        if path:
            self._write_file(path)
            self._current_file = path
            self.root.title(f"Markdownエディタ — {os.path.basename(path)}")

    def _write_file(self, path):
        try:
            content = self.editor.get("1.0", tk.END)
            with open(path, "w", encoding="utf-8") as f:
                f.write(content)
            self._modified = False
            self.status_var.set(f"保存しました: {path}")
        except Exception as e:
            messagebox.showerror("エラー", str(e))


if __name__ == "__main__":
    root = tk.Tk()
    app = App36(root)
    root.mainloop()

5. コード解説

Markdownエディタ（プレビュー付き）のコードを、実際に書かれている実装に沿って解説します。

クラス設計とコンストラクタ

App36 クラスにアプリの全機能をまとめています（メソッド17個・全467行）。__init__ ではタイトル「Markdownエディタ（プレビュー付き）」とウィンドウサイズ 1100x700 を設定します。あわせて状態を保持する変数（self._current_file・self._modified）を初期化し、そのあと _build_ui() → _load_sample() の順に呼び出して初期状態を作ります。

※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。

ウィジェット構成

画面は tk.Frame×4・tk.Label×5・ttk.Combobox・tk.Button（ループで生成）・ttk.Radiobutton（ループで生成）・ttk.PanedWindow・tk.Text×3・ttk.Scrollbar×2 で構成しています。PanedWindow を使っているので、ペインの境界をマウスでドラッグして幅を変えられます。

※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。

イベント処理とボタンの接続

ボタンはラベルと処理をペアで並べたデータをループで回して生成し、それぞれ _open_file()・_save_file()・_save_as_file() を command= に渡しています。ボタンを増やしたいときはこのペアを1行足すだけで済みます。また bind("<<ComboboxSelected>>", ...) から _load_sample()、bind("<KeyRelease>", ...) から _on_key() を呼べるようにイベントも登録しています。

※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。

例外処理

try-except で Exception・ImportError を捕捉しています。あわせて messagebox.showerror() のダイアログで、ユーザーへの通知・確認を行います。

※ 該当部分のコード本体は 「4. 完全なソースコード」 をご参照ください（重複表示を避けるため再掲を省略しています）。

6. ステップバイステップガイド

このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。

  1. 1
    ファイルを作成する

    新しいファイルを作成して app36.py と保存します。外部ライブラリ markdown・tkinterweb を使います。先に pip install markdown tkinterweb を実行してください。

  2. 2
    クラスの骨格を作る

    App36 クラスを定義し、__init__ と、末尾の root = tk.Tk() ～ mainloop() の最小構成を書いて、まず空のウィンドウが出ることを確認します。

  3. 3
    ウィンドウを設定する

    title("Markdownエディタ（プレビュー付き）")・geometry("1100x700")・configure(bg="#1e1e1e")・minsize(1100, 700) をコンストラクタで設定します。

  4. 4
    画面部品を並べる

    _build_ui() の中で、tk.Frame×4・tk.Label×5・ttk.Combobox・tk.Button（ループで生成）・ttk.Radiobutton（ループで生成）・ttk.PanedWindow・tk.Text×3・ttk.Scrollbar×2 を作って配置します（掲載コードと同じ並び順で書くとレイアウトが一致します）。まず表示だけ確認しましょう。

  5. 5
    イベントを接続する

    ループ生成のボタンは、ラベルと処理（_open_file()・_save_file()・_save_as_file()）をペアで並べたデータをループで回し、command= に渡して接続します。bind("<<ComboboxSelected>>", ...)・bind("<KeyRelease>", ...) の登録も忘れずに。

  6. 6
    中心になるメソッドを実装する

    アプリの本体である _open_file()（16行）・_save_as_file()（9行）・_on_key()（8行）など を実装します。

  7. 7
    動作確認する

    python app36.py で起動し、各ボタンが反応すること・キー操作（<KeyRelease>）が効くことを確認します。

7. カスタマイズアイデア

基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。

💡 ダークモードを追加する

bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。

💡 クラス定数を書き換えて動きを変える

データはクラス定数（SAMPLES・CSS）にまとまっています。中身を書き換えて動きが変わることを確かめましょう。複数の定数が対応関係にある場合は、セットで整合させる必要がある点に注意してください。

💡 配色をまとめて管理する

背景色 #1e1e1e をはじめ、色コードが各所に直書きされています。色を1つの辞書にまとめると、テーマの切り替えが1か所の変更で済むようになります。

8. よくある問題と解決法

❌ 文字のフォントが崩れる・見た目が違う

原因：このコードは font=("Noto Sans JP", ...) のようにフォント名を直接指定しています。環境にこのフォントが入っていないと、OS が代わりのフォントで表示するため、見本と見た目が変わることがあります。

解決法：動作には支障ありません。気になる場合は font 引数の名前を自分の OS に入っているフォントへ書き換えるか、font 引数を省略してください。

❌ <KeyRelease> キーを押しても反応しない

原因：bind("<KeyRelease>", ...) はウィジェット単位で登録されるため、ウィンドウ（またはバインド先）にキーボードフォーカスが無いとイベントが届きません。

解決法：一度ウィンドウ内をクリックしてフォーカスを与えてから、キーを押してください。

❌ ウィンドウの大きさが画面に合わない

原因：geometry("1100x700") の固定サイズで起動するためです。

解決法：geometry() と minsize() の両方の数値を書き換えて起動サイズを調整してください。なお、このコードにはウィンドウサイズを固定する設定（resizable の指定）が無いため、ウィンドウの端をドラッグしたサイズ変更は既定どおり可能です。ただし minsize(1100, 700) を指定しているため、起動時の大きさより小さくは縮められません（縮めると画面部品が表示されなくなるのを防ぐためです）。

9. 練習問題

アプリの理解を深めるための練習問題です。気になるものから挑戦してみてください（課題3は定型の発展課題です）。どちらの課題も、markdown と tkinterweb が入っていない環境のまま確かめられます。試す前に、大事なファイルではなく新しいファイルを開いて練習してください（「💾 保存」は上書きします）。

  1. 課題1：保存していない変更があるときに確認してから閉じる

    self._modified は変更のたびに True になりますが、どこからも読まれていません。ウィンドウを閉じるときに未保存なら確認する処理を足してください。

    期待結果：本文を1文字打ってから ✕ を押すと「保存していない変更があります」の確認が出る。起動しただけで何も打っていないときは、これまでどおりすぐ閉じる。

    合格条件

    • 確認で「いいえ」を選ぶとウィンドウが残り、本文もそのまま残る
    • 「💾 保存」で保存したあとに ✕ を押すと、確認は出ずに閉じる
    • 「📂 開く」でファイルを読み込んだ直後も、確認は出ない

    ヒント①（どこを触るか）: 触るのは2か所です。__init__ の末尾に self.root.protocol("WM_DELETE_WINDOW", self._on_close) を1行足し、_on_close() を新しく作ります。
    ヒント②（使うもの）: 確認は messagebox.askyesno(...) で出し、閉じるときは self.root.destroy() を呼びます。_write_file() が保存のたびに self._modified = False へ戻すので、保存後の判定はそのまま通ります。
    つまずきやすい点: _on_key() が self._modified = True にするため、そのままでは起動直後から未保存の扱いになります。__init__ が _load_sample("基本サンプル") を呼び、その中で _on_key() が走るからです。_open_file() も self._modified = False のあとで _on_key() を呼ぶので、同じずれが起きます。どちらも読み込みが終わったあとに False へ戻す1行を足すと、合格条件の3つがそろいます。

  2. 課題2：斜体の色付けが1つ隣にずれているのを直す

    エディタ側の色付けでは、*斜体* ではなく **太字** の内側と、そのすぐ後ろの * や * が斜体の色になります。italic のパターンを直してください。

    期待結果：起動時に読み込まれる「基本サンプル」の7行目 通常のテキスト。**太字** や *斜体* が使えます。 で、*斜体* だけが斜体用の色（#ce9178）になる。

    合格条件

    • **太字** は、これまでどおり太字の色付けのまま残る
    • 見出しやインラインコードの色付けは変わらない
    • * が1つだけの行では、斜体の色がどこにも付かない

    ヒント①（どこを触るか）: 触るのは _highlight_md() の patterns にある ("italic", ...) の1行です。** にはさまれた部分を外すように書き換えます。
    ヒント②（使うもの）: 前後に * が無いことは、後読みと先読みを使って r"(?<!\*)\*[^*\n]+\*(?!\*)" のように書けます。_highlight_md() は re.finditer(pattern, content, re.MULTILINE) の位置をそのまま 1.0+{m.start()}c に渡すので、パターンだけ直せば表示に反映されます。
    つまずきやすい点: タグは後から作ったものが前面に出るため、_setup_editor_tags() の並び順で italic が bold より優先されます。パターンを直さずにタグの順番だけ入れ替えると、今度は *斜体* に色が付かないままです。色付けは <KeyRelease> のたびに走りますが、起動時も _load_sample() から _on_key() が呼ばれるので、開いた時点の画面で確かめられます。

  3. 課題3：新しいボタンを追加する

    既存のボタンと同じ書き方で新しいボタンを1つ足し、押されたときに動くメソッドを自作してみましょう。ボタンの作成と command= の接続がセットで身に付きます。

🚀
次に挑戦するアプリ

このアプリをマスターしたら、次のアプリにも挑戦してみましょう。

🐛
エラーが出て動かないときは

写経中に赤いエラー文が出たら、Pythonエラー一覧＆解決法（英語メッセージ逆引き）で原因と直し方をすぐ確認できます。

📖
次のレベルへ進む参考書

このレベルのアプリが作れたら、入門書の次の「作るための本」へ進む時期です。実践におすすめのPython本（当サイトの参考書ランキング総合3〜4位）で自動化とコードの書き方の2冊を、その直後の用途別専門書の節でデータ分析・Web・AIの本を比較しています。