中級者向け No.091
Markdownエディター
左側でMarkdown入力し右側でHTMLプレビューをリアルタイム表示する分割エディター。markdown2活用。
📋 目次
1. アプリ概要
左側でMarkdown入力し右側でHTMLプレビューをリアルタイム表示する分割エディター。markdown2活用。
このアプリはutilカテゴリの実践的なPythonアプリです。使用ライブラリは tkinter（標準ライブラリ）・markdown2、難易度は ★★★ です。
Pythonの豊富なライブラリを活用することで、実用的なアプリを短いコードで実装できます。ソースコードをコピーして実行し、仕組みを理解したうえでカスタマイズに挑戦してみてください。
GUIアプリ開発はプログラミングの楽しさを実感できる最も効果的な学習方法のひとつです。変数・関数・クラス・イベント処理などの重要な概念が自然と身につきます。
2. 機能一覧
- Markdownエディターのメイン機能
- 直感的なGUIインターフェース
- 入力値のバリデーション
- エラーハンドリング
- 結果の見やすい表示
- クリア機能付き
3. 事前準備・環境
動作確認環境
Python 3.10 以上 / Windows・Mac・Linux すべて対応
以下の環境で動作確認しています。
- Python 3.10 以上
- OS: Windows 10/11・macOS 12+・Ubuntu 20.04+
追加のインストールは不要です（標準ライブラリのみ）。
4. 完全なソースコード
コードのコピー方法
右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。
app091.py
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os
try:
from PIL import Image, ImageTk
PIL_AVAILABLE = True
except ImportError:
PIL_AVAILABLE = False
class App091:
"""Markdownエディター"""
# 簡易Markdown → HTML変換
def __init__(self, root):
self.root = root
self.root.title("Markdownエディター")
self.root.geometry("1060x660")
self.root.configure(bg="#0d1117")
self._current_path = None
self._modified = False
self._build_ui()
self._load_sample()
def _build_ui(self):
# メニューバー
menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
activebackground="#1f6feb")
file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
file_menu.add_command(label="新規", accelerator="Ctrl+N",
command=self._new)
file_menu.add_command(label="開く", accelerator="Ctrl+O",
command=self._open)
file_menu.add_command(label="保存", accelerator="Ctrl+S",
command=self._save)
file_menu.add_command(label="名前を付けて保存",
command=self._save_as)
file_menu.add_separator()
file_menu.add_command(label="HTMLエクスポート",
command=self._export_html)
menubar.add_cascade(label="ファイル", menu=file_menu)
self.root.configure(menu=menubar)
# キーバインド
self.root.bind("<Control-n>", lambda e: self._new())
self.root.bind("<Control-o>", lambda e: self._open())
self.root.bind("<Control-s>", lambda e: self._save())
header = tk.Frame(self.root, bg="#161b22", pady=6)
header.pack(fill=tk.X)
tk.Label(header, text="📝 Markdownエディター",
font=("Noto Sans JP", 12, "bold"),
bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
# ツールバー (Markdown ショートカット)
tb = tk.Frame(self.root, bg="#161b22", pady=2)
tb.pack(fill=tk.X)
buttons = [
("B", self._insert_bold, "太字"),
("I", self._insert_italic, "斜体"),
("H1", self._insert_h1, "見出し1"),
("H2", self._insert_h2, "見出し2"),
("H3", self._insert_h3, "見出し3"),
("―", self._insert_hr, "水平線"),
("○", self._insert_ul, "箇条書き"),
("1.", self._insert_ol, "番号付きリスト"),
("[]", self._insert_checkbox, "チェックボックス"),
("```", self._insert_code, "コードブロック"),
("🔗", self._insert_link, "リンク"),
]
for label, cmd, tip in buttons:
btn = tk.Button(tb, text=label, command=cmd,
bg="#21262d", fg="#c9d1d9",
relief=tk.FLAT, font=("Arial", 9),
padx=8, pady=3,
activebackground="#30363d", bd=0)
btn.pack(side=tk.LEFT, padx=1)
# 分割ビュー
paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)
# 左: Markdown入力
left = tk.Frame(paned, bg="#0d1117")
paned.add(left, weight=1)
tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
font=("Courier New", 10), relief=tk.FLAT,
insertbackground="white", wrap=tk.WORD,
tabs="4c", undo=True)
lsb = ttk.Scrollbar(left, command=self.md_text.yview)
self.md_text.configure(yscrollcommand=lsb.set)
lsb.pack(side=tk.RIGHT, fill=tk.Y)
self.md_text.pack(fill=tk.BOTH, expand=True)
self.md_text.bind("<KeyRelease>", self._on_change)
# シンタックスハイライトタグ
self.md_text.tag_configure("heading", foreground="#4fc3f7",
font=("Courier New", 11, "bold"))
self.md_text.tag_configure("bold", foreground="#ffa726",
font=("Courier New", 10, "bold"))
self.md_text.tag_configure("italic", foreground="#ab47bc",
font=("Courier New", 10, "italic"))
self.md_text.tag_configure("code", foreground="#b5e853",
background="#1e1e1e")
self.md_text.tag_configure("link", foreground="#26a69a",
underline=True)
self.md_text.tag_configure("hr", foreground="#555")
self.md_text.tag_configure("list", foreground="#ef5350")
# 右: プレビュー
right = tk.Frame(paned, bg="#1e1e1e")
paned.add(right, weight=1)
tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
font=("Arial", 10), relief=tk.FLAT,
state=tk.DISABLED, wrap=tk.WORD,
padx=8, pady=4)
psb = ttk.Scrollbar(right, command=self.preview.yview)
self.preview.configure(yscrollcommand=psb.set)
psb.pack(side=tk.RIGHT, fill=tk.Y)
self.preview.pack(fill=tk.BOTH, expand=True)
# プレビュータグ
self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
foreground="#58a6ff")
self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
foreground="#79c0ff")
self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
foreground="#a5d6ff")
self.preview.tag_configure("bold", font=("Arial", 10, "bold"))
self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
self.preview.tag_configure("code", font=("Courier New", 9),
background="#161b22",
foreground="#b5e853")
self.preview.tag_configure("hr", foreground="#30363d")
self.preview.tag_configure("link", foreground="#26a69a", underline=True)
self.preview.tag_configure("blockquote", foreground="#8b949e",
lmargin1=20, lmargin2=20)
self.status_var = tk.StringVar(value="準備完了")
tk.Label(self.root, textvariable=self.status_var,
bg="#21262d", fg="#8b949e", font=("Courier New", 9),
anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)
def _load_sample(self):
sample = """# Markdown エディター
## 概要
これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。
---
## 機能
- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート
## コード例
```python
def hello(name: str) -> str:
return f"Hello, {name}!"
```
## リンク
[Python公式サイト](https://www.python.org)
> これは引用文です。
1. 項目1
2. 項目2
3. 項目3
"""
self.md_text.insert("1.0", sample)
self._update_preview()
self._apply_highlight()
def _on_change(self, _=None):
self._modified = True
self._update_preview()
self._apply_highlight()
chars = len(self.md_text.get("1.0", tk.END))
lines = int(self.md_text.index(tk.END).split(".")[0])
self.status_var.set(f"行: {lines} 文字: {chars} {'*変更あり' if self._modified else ''}")
def _apply_highlight(self):
text = self.md_text
for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
text.tag_remove(tag, "1.0", tk.END)
content = text.get("1.0", tk.END)
def highlight(pattern, tag, flags=0):
for m in re.finditer(pattern, content, flags | re.MULTILINE):
start = f"1.0 + {m.start()} chars"
end = f"1.0 + {m.end()} chars"
text.tag_add(tag, start, end)
highlight(r"^#{1,6} .+$", "heading")
highlight(r"\*\*[^*]+\*\*", "bold")
highlight(r"\*[^*]+\*", "italic")
highlight(r"`[^`]+`", "code")
highlight(r"\[.+?\]\(.+?\)", "link")
highlight(r"^---+$", "hr")
highlight(r"^[ \t]*[-*+] ", "list")
highlight(r"^\d+\. ", "list")
def _update_preview(self):
md = self.md_text.get("1.0", tk.END)
self.preview.configure(state=tk.NORMAL)
self.preview.delete("1.0", tk.END)
for line in md.splitlines():
self._render_line(line)
self.preview.insert(tk.END, "\n")
self.preview.configure(state=tk.DISABLED)
def _render_line(self, line):
pv = self.preview
# 見出し
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
level = len(m.group(1))
tag = f"h{min(level, 3)}"
pv.insert(tk.END, m.group(2), tag)
return
# HR
if re.match(r"^---+$", line):
pv.insert(tk.END, "─" * 40, "hr")
return
# 引用
m = re.match(r"^> (.+)$", line)
if m:
pv.insert(tk.END, "│ " + m.group(1), "blockquote")
return
# コードブロック
if line.strip().startswith("```"):
pv.insert(tk.END, line, "code")
return
# インライン
parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
for part in parts:
if re.match(r"\*\*[^*]+\*\*", part):
pv.insert(tk.END, part[2:-2], "bold")
elif re.match(r"\*[^*]+\*", part):
pv.insert(tk.END, part[1:-1], "italic")
elif re.match(r"`[^`]+`", part):
pv.insert(tk.END, part[1:-1], "code")
elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
txt = re.match(r"\[([^\]]+)\]", part).group(1)
pv.insert(tk.END, txt, "link")
else:
pv.insert(tk.END, part)
# ── ツールバーアクション ─────────────────────────────────
def _wrap_selection(self, before, after=""):
try:
sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
except tk.TclError:
self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
self._on_change()
def _insert_bold(self): self._wrap_selection("**")
def _insert_italic(self): self._wrap_selection("*")
def _insert_h1(self): self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
def _insert_h2(self): self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
def _insert_h3(self): self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
def _insert_hr(self): self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
def _insert_ul(self): self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
def _insert_ol(self): self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
def _insert_code(self):
self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
self._on_change()
def _insert_link(self):
self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
self._on_change()
# ── ファイル操作 ─────────────────────────────────────────
def _new(self):
if self._modified:
if not messagebox.askyesno("確認", "変更を破棄しますか？"):
return
self.md_text.delete("1.0", tk.END)
self._current_path = None
self._modified = False
self.status_var.set("新規ファイル")
def _open(self):
path = filedialog.askopenfilename(
filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
("すべて", "*.*")])
if not path:
return
for enc in ("utf-8", "shift-jis", "cp932"):
try:
with open(path, encoding=enc) as f:
content = f.read()
break
except UnicodeDecodeError:
continue
self.md_text.delete("1.0", tk.END)
self.md_text.insert("1.0", content)
self._current_path = path
self._modified = False
self._on_change()
self.status_var.set(f"開いた: {path}")
def _save(self):
if not self._current_path:
self._save_as()
return
self._write(self._current_path)
def _save_as(self):
path = filedialog.asksaveasfilename(
defaultextension=".md",
filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
if path:
self._current_path = path
self._write(path)
def _write(self, path):
try:
with open(path, "w", encoding="utf-8") as f:
f.write(self.md_text.get("1.0", tk.END).rstrip())
self._modified = False
self.status_var.set(f"保存: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _export_html(self):
path = filedialog.asksaveasfilename(
defaultextension=".html",
filetypes=[("HTML", "*.html")])
if not path:
return
md = self.md_text.get("1.0", tk.END)
html_body = self._md_to_html(md)
html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
try:
with open(path, "w", encoding="utf-8") as f:
f.write(html)
messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _md_to_html(self, md):
lines = md.splitlines()
html = []
in_code = False
for line in lines:
if line.strip().startswith("```"):
in_code = not in_code
html.append("</pre>" if not in_code else '<pre><code>')
continue
if in_code:
html.append(line)
continue
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
n = len(m.group(1))
html.append(f"<h{n}>{m.group(2)}</h{n}>")
continue
if re.match(r"^---+$", line):
html.append("<hr>")
continue
m2 = re.match(r"^> (.+)$", line)
if m2:
html.append(f"<blockquote>{m2.group(1)}</blockquote>")
continue
line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
if re.match(r"^[ \t]*[-*+] ", line):
line = f"<li>{line.lstrip(' *-+').strip()}</li>"
html.append(f"<p>{line}</p>" if line.strip() else "")
return "\n".join(html)
if __name__ == "__main__":
root = tk.Tk()
app = App091(root)
root.mainloop()
5. コード解説
Markdownエディターのコードを詳しく解説します。クラスベースの設計で各機能を整理して実装しています。
クラス設計とコンストラクタ
App091クラスにアプリの全機能をまとめています。__init__でウィンドウ設定、_build_ui()でUI構築、process()でメイン処理を担当します。責任の分離により、コードが読みやすくなります。
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os
try:
from PIL import Image, ImageTk
PIL_AVAILABLE = True
except ImportError:
PIL_AVAILABLE = False
class App091:
"""Markdownエディター"""
# 簡易Markdown → HTML変換
def __init__(self, root):
self.root = root
self.root.title("Markdownエディター")
self.root.geometry("1060x660")
self.root.configure(bg="#0d1117")
self._current_path = None
self._modified = False
self._build_ui()
self._load_sample()
def _build_ui(self):
# メニューバー
menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
activebackground="#1f6feb")
file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
file_menu.add_command(label="新規", accelerator="Ctrl+N",
command=self._new)
file_menu.add_command(label="開く", accelerator="Ctrl+O",
command=self._open)
file_menu.add_command(label="保存", accelerator="Ctrl+S",
command=self._save)
file_menu.add_command(label="名前を付けて保存",
command=self._save_as)
file_menu.add_separator()
file_menu.add_command(label="HTMLエクスポート",
command=self._export_html)
menubar.add_cascade(label="ファイル", menu=file_menu)
self.root.configure(menu=menubar)
# キーバインド
self.root.bind("<Control-n>", lambda e: self._new())
self.root.bind("<Control-o>", lambda e: self._open())
self.root.bind("<Control-s>", lambda e: self._save())
header = tk.Frame(self.root, bg="#161b22", pady=6)
header.pack(fill=tk.X)
tk.Label(header, text="📝 Markdownエディター",
font=("Noto Sans JP", 12, "bold"),
bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
# ツールバー (Markdown ショートカット)
tb = tk.Frame(self.root, bg="#161b22", pady=2)
tb.pack(fill=tk.X)
buttons = [
("B", self._insert_bold, "太字"),
("I", self._insert_italic, "斜体"),
("H1", self._insert_h1, "見出し1"),
("H2", self._insert_h2, "見出し2"),
("H3", self._insert_h3, "見出し3"),
("―", self._insert_hr, "水平線"),
("○", self._insert_ul, "箇条書き"),
("1.", self._insert_ol, "番号付きリスト"),
("[]", self._insert_checkbox, "チェックボックス"),
("```", self._insert_code, "コードブロック"),
("🔗", self._insert_link, "リンク"),
]
for label, cmd, tip in buttons:
btn = tk.Button(tb, text=label, command=cmd,
bg="#21262d", fg="#c9d1d9",
relief=tk.FLAT, font=("Arial", 9),
padx=8, pady=3,
activebackground="#30363d", bd=0)
btn.pack(side=tk.LEFT, padx=1)
# 分割ビュー
paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)
# 左: Markdown入力
left = tk.Frame(paned, bg="#0d1117")
paned.add(left, weight=1)
tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
font=("Courier New", 10), relief=tk.FLAT,
insertbackground="white", wrap=tk.WORD,
tabs="4c", undo=True)
lsb = ttk.Scrollbar(left, command=self.md_text.yview)
self.md_text.configure(yscrollcommand=lsb.set)
lsb.pack(side=tk.RIGHT, fill=tk.Y)
self.md_text.pack(fill=tk.BOTH, expand=True)
self.md_text.bind("<KeyRelease>", self._on_change)
# シンタックスハイライトタグ
self.md_text.tag_configure("heading", foreground="#4fc3f7",
font=("Courier New", 11, "bold"))
self.md_text.tag_configure("bold", foreground="#ffa726",
font=("Courier New", 10, "bold"))
self.md_text.tag_configure("italic", foreground="#ab47bc",
font=("Courier New", 10, "italic"))
self.md_text.tag_configure("code", foreground="#b5e853",
background="#1e1e1e")
self.md_text.tag_configure("link", foreground="#26a69a",
underline=True)
self.md_text.tag_configure("hr", foreground="#555")
self.md_text.tag_configure("list", foreground="#ef5350")
# 右: プレビュー
right = tk.Frame(paned, bg="#1e1e1e")
paned.add(right, weight=1)
tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
font=("Arial", 10), relief=tk.FLAT,
state=tk.DISABLED, wrap=tk.WORD,
padx=8, pady=4)
psb = ttk.Scrollbar(right, command=self.preview.yview)
self.preview.configure(yscrollcommand=psb.set)
psb.pack(side=tk.RIGHT, fill=tk.Y)
self.preview.pack(fill=tk.BOTH, expand=True)
# プレビュータグ
self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
foreground="#58a6ff")
self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
foreground="#79c0ff")
self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
foreground="#a5d6ff")
self.preview.tag_configure("bold", font=("Arial", 10, "bold"))
self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
self.preview.tag_configure("code", font=("Courier New", 9),
background="#161b22",
foreground="#b5e853")
self.preview.tag_configure("hr", foreground="#30363d")
self.preview.tag_configure("link", foreground="#26a69a", underline=True)
self.preview.tag_configure("blockquote", foreground="#8b949e",
lmargin1=20, lmargin2=20)
self.status_var = tk.StringVar(value="準備完了")
tk.Label(self.root, textvariable=self.status_var,
bg="#21262d", fg="#8b949e", font=("Courier New", 9),
anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)
def _load_sample(self):
sample = """# Markdown エディター
## 概要
これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。
---
## 機能
- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート
## コード例
```python
def hello(name: str) -> str:
return f"Hello, {name}!"
```
## リンク
[Python公式サイト](https://www.python.org)
> これは引用文です。
1. 項目1
2. 項目2
3. 項目3
"""
self.md_text.insert("1.0", sample)
self._update_preview()
self._apply_highlight()
def _on_change(self, _=None):
self._modified = True
self._update_preview()
self._apply_highlight()
chars = len(self.md_text.get("1.0", tk.END))
lines = int(self.md_text.index(tk.END).split(".")[0])
self.status_var.set(f"行: {lines} 文字: {chars} {'*変更あり' if self._modified else ''}")
def _apply_highlight(self):
text = self.md_text
for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
text.tag_remove(tag, "1.0", tk.END)
content = text.get("1.0", tk.END)
def highlight(pattern, tag, flags=0):
for m in re.finditer(pattern, content, flags | re.MULTILINE):
start = f"1.0 + {m.start()} chars"
end = f"1.0 + {m.end()} chars"
text.tag_add(tag, start, end)
highlight(r"^#{1,6} .+$", "heading")
highlight(r"\*\*[^*]+\*\*", "bold")
highlight(r"\*[^*]+\*", "italic")
highlight(r"`[^`]+`", "code")
highlight(r"\[.+?\]\(.+?\)", "link")
highlight(r"^---+$", "hr")
highlight(r"^[ \t]*[-*+] ", "list")
highlight(r"^\d+\. ", "list")
def _update_preview(self):
md = self.md_text.get("1.0", tk.END)
self.preview.configure(state=tk.NORMAL)
self.preview.delete("1.0", tk.END)
for line in md.splitlines():
self._render_line(line)
self.preview.insert(tk.END, "\n")
self.preview.configure(state=tk.DISABLED)
def _render_line(self, line):
pv = self.preview
# 見出し
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
level = len(m.group(1))
tag = f"h{min(level, 3)}"
pv.insert(tk.END, m.group(2), tag)
return
# HR
if re.match(r"^---+$", line):
pv.insert(tk.END, "─" * 40, "hr")
return
# 引用
m = re.match(r"^> (.+)$", line)
if m:
pv.insert(tk.END, "│ " + m.group(1), "blockquote")
return
# コードブロック
if line.strip().startswith("```"):
pv.insert(tk.END, line, "code")
return
# インライン
parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
for part in parts:
if re.match(r"\*\*[^*]+\*\*", part):
pv.insert(tk.END, part[2:-2], "bold")
elif re.match(r"\*[^*]+\*", part):
pv.insert(tk.END, part[1:-1], "italic")
elif re.match(r"`[^`]+`", part):
pv.insert(tk.END, part[1:-1], "code")
elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
txt = re.match(r"\[([^\]]+)\]", part).group(1)
pv.insert(tk.END, txt, "link")
else:
pv.insert(tk.END, part)
# ── ツールバーアクション ─────────────────────────────────
def _wrap_selection(self, before, after=""):
try:
sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
except tk.TclError:
self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
self._on_change()
def _insert_bold(self): self._wrap_selection("**")
def _insert_italic(self): self._wrap_selection("*")
def _insert_h1(self): self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
def _insert_h2(self): self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
def _insert_h3(self): self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
def _insert_hr(self): self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
def _insert_ul(self): self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
def _insert_ol(self): self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
def _insert_code(self):
self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
self._on_change()
def _insert_link(self):
self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
self._on_change()
# ── ファイル操作 ─────────────────────────────────────────
def _new(self):
if self._modified:
if not messagebox.askyesno("確認", "変更を破棄しますか？"):
return
self.md_text.delete("1.0", tk.END)
self._current_path = None
self._modified = False
self.status_var.set("新規ファイル")
def _open(self):
path = filedialog.askopenfilename(
filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
("すべて", "*.*")])
if not path:
return
for enc in ("utf-8", "shift-jis", "cp932"):
try:
with open(path, encoding=enc) as f:
content = f.read()
break
except UnicodeDecodeError:
continue
self.md_text.delete("1.0", tk.END)
self.md_text.insert("1.0", content)
self._current_path = path
self._modified = False
self._on_change()
self.status_var.set(f"開いた: {path}")
def _save(self):
if not self._current_path:
self._save_as()
return
self._write(self._current_path)
def _save_as(self):
path = filedialog.asksaveasfilename(
defaultextension=".md",
filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
if path:
self._current_path = path
self._write(path)
def _write(self, path):
try:
with open(path, "w", encoding="utf-8") as f:
f.write(self.md_text.get("1.0", tk.END).rstrip())
self._modified = False
self.status_var.set(f"保存: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _export_html(self):
path = filedialog.asksaveasfilename(
defaultextension=".html",
filetypes=[("HTML", "*.html")])
if not path:
return
md = self.md_text.get("1.0", tk.END)
html_body = self._md_to_html(md)
html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
try:
with open(path, "w", encoding="utf-8") as f:
f.write(html)
messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _md_to_html(self, md):
lines = md.splitlines()
html = []
in_code = False
for line in lines:
if line.strip().startswith("```"):
in_code = not in_code
html.append("</pre>" if not in_code else '<pre><code>')
continue
if in_code:
html.append(line)
continue
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
n = len(m.group(1))
html.append(f"<h{n}>{m.group(2)}</h{n}>")
continue
if re.match(r"^---+$", line):
html.append("<hr>")
continue
m2 = re.match(r"^> (.+)$", line)
if m2:
html.append(f"<blockquote>{m2.group(1)}</blockquote>")
continue
line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
if re.match(r"^[ \t]*[-*+] ", line):
line = f"<li>{line.lstrip(' *-+').strip()}</li>"
html.append(f"<p>{line}</p>" if line.strip() else "")
return "\n".join(html)
if __name__ == "__main__":
root = tk.Tk()
app = App091(root)
root.mainloop()
UIレイアウトの構築
LabelFrameで入力エリアと結果エリアを視覚的に分けています。pack()で縦に並べ、expand=Trueで結果エリアが画面いっぱいに広がるよう設定しています。
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os
try:
from PIL import Image, ImageTk
PIL_AVAILABLE = True
except ImportError:
PIL_AVAILABLE = False
class App091:
"""Markdownエディター"""
# 簡易Markdown → HTML変換
def __init__(self, root):
self.root = root
self.root.title("Markdownエディター")
self.root.geometry("1060x660")
self.root.configure(bg="#0d1117")
self._current_path = None
self._modified = False
self._build_ui()
self._load_sample()
def _build_ui(self):
# メニューバー
menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
activebackground="#1f6feb")
file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
file_menu.add_command(label="新規", accelerator="Ctrl+N",
command=self._new)
file_menu.add_command(label="開く", accelerator="Ctrl+O",
command=self._open)
file_menu.add_command(label="保存", accelerator="Ctrl+S",
command=self._save)
file_menu.add_command(label="名前を付けて保存",
command=self._save_as)
file_menu.add_separator()
file_menu.add_command(label="HTMLエクスポート",
command=self._export_html)
menubar.add_cascade(label="ファイル", menu=file_menu)
self.root.configure(menu=menubar)
# キーバインド
self.root.bind("<Control-n>", lambda e: self._new())
self.root.bind("<Control-o>", lambda e: self._open())
self.root.bind("<Control-s>", lambda e: self._save())
header = tk.Frame(self.root, bg="#161b22", pady=6)
header.pack(fill=tk.X)
tk.Label(header, text="📝 Markdownエディター",
font=("Noto Sans JP", 12, "bold"),
bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
# ツールバー (Markdown ショートカット)
tb = tk.Frame(self.root, bg="#161b22", pady=2)
tb.pack(fill=tk.X)
buttons = [
("B", self._insert_bold, "太字"),
("I", self._insert_italic, "斜体"),
("H1", self._insert_h1, "見出し1"),
("H2", self._insert_h2, "見出し2"),
("H3", self._insert_h3, "見出し3"),
("―", self._insert_hr, "水平線"),
("○", self._insert_ul, "箇条書き"),
("1.", self._insert_ol, "番号付きリスト"),
("[]", self._insert_checkbox, "チェックボックス"),
("```", self._insert_code, "コードブロック"),
("🔗", self._insert_link, "リンク"),
]
for label, cmd, tip in buttons:
btn = tk.Button(tb, text=label, command=cmd,
bg="#21262d", fg="#c9d1d9",
relief=tk.FLAT, font=("Arial", 9),
padx=8, pady=3,
activebackground="#30363d", bd=0)
btn.pack(side=tk.LEFT, padx=1)
# 分割ビュー
paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)
# 左: Markdown入力
left = tk.Frame(paned, bg="#0d1117")
paned.add(left, weight=1)
tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
font=("Courier New", 10), relief=tk.FLAT,
insertbackground="white", wrap=tk.WORD,
tabs="4c", undo=True)
lsb = ttk.Scrollbar(left, command=self.md_text.yview)
self.md_text.configure(yscrollcommand=lsb.set)
lsb.pack(side=tk.RIGHT, fill=tk.Y)
self.md_text.pack(fill=tk.BOTH, expand=True)
self.md_text.bind("<KeyRelease>", self._on_change)
# シンタックスハイライトタグ
self.md_text.tag_configure("heading", foreground="#4fc3f7",
font=("Courier New", 11, "bold"))
self.md_text.tag_configure("bold", foreground="#ffa726",
font=("Courier New", 10, "bold"))
self.md_text.tag_configure("italic", foreground="#ab47bc",
font=("Courier New", 10, "italic"))
self.md_text.tag_configure("code", foreground="#b5e853",
background="#1e1e1e")
self.md_text.tag_configure("link", foreground="#26a69a",
underline=True)
self.md_text.tag_configure("hr", foreground="#555")
self.md_text.tag_configure("list", foreground="#ef5350")
# 右: プレビュー
right = tk.Frame(paned, bg="#1e1e1e")
paned.add(right, weight=1)
tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
font=("Arial", 10), relief=tk.FLAT,
state=tk.DISABLED, wrap=tk.WORD,
padx=8, pady=4)
psb = ttk.Scrollbar(right, command=self.preview.yview)
self.preview.configure(yscrollcommand=psb.set)
psb.pack(side=tk.RIGHT, fill=tk.Y)
self.preview.pack(fill=tk.BOTH, expand=True)
# プレビュータグ
self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
foreground="#58a6ff")
self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
foreground="#79c0ff")
self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
foreground="#a5d6ff")
self.preview.tag_configure("bold", font=("Arial", 10, "bold"))
self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
self.preview.tag_configure("code", font=("Courier New", 9),
background="#161b22",
foreground="#b5e853")
self.preview.tag_configure("hr", foreground="#30363d")
self.preview.tag_configure("link", foreground="#26a69a", underline=True)
self.preview.tag_configure("blockquote", foreground="#8b949e",
lmargin1=20, lmargin2=20)
self.status_var = tk.StringVar(value="準備完了")
tk.Label(self.root, textvariable=self.status_var,
bg="#21262d", fg="#8b949e", font=("Courier New", 9),
anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)
def _load_sample(self):
sample = """# Markdown エディター
## 概要
これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。
---
## 機能
- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート
## コード例
```python
def hello(name: str) -> str:
return f"Hello, {name}!"
```
## リンク
[Python公式サイト](https://www.python.org)
> これは引用文です。
1. 項目1
2. 項目2
3. 項目3
"""
self.md_text.insert("1.0", sample)
self._update_preview()
self._apply_highlight()
def _on_change(self, _=None):
self._modified = True
self._update_preview()
self._apply_highlight()
chars = len(self.md_text.get("1.0", tk.END))
lines = int(self.md_text.index(tk.END).split(".")[0])
self.status_var.set(f"行: {lines} 文字: {chars} {'*変更あり' if self._modified else ''}")
def _apply_highlight(self):
text = self.md_text
for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
text.tag_remove(tag, "1.0", tk.END)
content = text.get("1.0", tk.END)
def highlight(pattern, tag, flags=0):
for m in re.finditer(pattern, content, flags | re.MULTILINE):
start = f"1.0 + {m.start()} chars"
end = f"1.0 + {m.end()} chars"
text.tag_add(tag, start, end)
highlight(r"^#{1,6} .+$", "heading")
highlight(r"\*\*[^*]+\*\*", "bold")
highlight(r"\*[^*]+\*", "italic")
highlight(r"`[^`]+`", "code")
highlight(r"\[.+?\]\(.+?\)", "link")
highlight(r"^---+$", "hr")
highlight(r"^[ \t]*[-*+] ", "list")
highlight(r"^\d+\. ", "list")
def _update_preview(self):
md = self.md_text.get("1.0", tk.END)
self.preview.configure(state=tk.NORMAL)
self.preview.delete("1.0", tk.END)
for line in md.splitlines():
self._render_line(line)
self.preview.insert(tk.END, "\n")
self.preview.configure(state=tk.DISABLED)
def _render_line(self, line):
pv = self.preview
# 見出し
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
level = len(m.group(1))
tag = f"h{min(level, 3)}"
pv.insert(tk.END, m.group(2), tag)
return
# HR
if re.match(r"^---+$", line):
pv.insert(tk.END, "─" * 40, "hr")
return
# 引用
m = re.match(r"^> (.+)$", line)
if m:
pv.insert(tk.END, "│ " + m.group(1), "blockquote")
return
# コードブロック
if line.strip().startswith("```"):
pv.insert(tk.END, line, "code")
return
# インライン
parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
for part in parts:
if re.match(r"\*\*[^*]+\*\*", part):
pv.insert(tk.END, part[2:-2], "bold")
elif re.match(r"\*[^*]+\*", part):
pv.insert(tk.END, part[1:-1], "italic")
elif re.match(r"`[^`]+`", part):
pv.insert(tk.END, part[1:-1], "code")
elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
txt = re.match(r"\[([^\]]+)\]", part).group(1)
pv.insert(tk.END, txt, "link")
else:
pv.insert(tk.END, part)
# ── ツールバーアクション ─────────────────────────────────
def _wrap_selection(self, before, after=""):
try:
sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
except tk.TclError:
self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
self._on_change()
def _insert_bold(self): self._wrap_selection("**")
def _insert_italic(self): self._wrap_selection("*")
def _insert_h1(self): self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
def _insert_h2(self): self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
def _insert_h3(self): self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
def _insert_hr(self): self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
def _insert_ul(self): self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
def _insert_ol(self): self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
def _insert_code(self):
self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
self._on_change()
def _insert_link(self):
self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
self._on_change()
# ── ファイル操作 ─────────────────────────────────────────
def _new(self):
if self._modified:
if not messagebox.askyesno("確認", "変更を破棄しますか？"):
return
self.md_text.delete("1.0", tk.END)
self._current_path = None
self._modified = False
self.status_var.set("新規ファイル")
def _open(self):
path = filedialog.askopenfilename(
filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
("すべて", "*.*")])
if not path:
return
for enc in ("utf-8", "shift-jis", "cp932"):
try:
with open(path, encoding=enc) as f:
content = f.read()
break
except UnicodeDecodeError:
continue
self.md_text.delete("1.0", tk.END)
self.md_text.insert("1.0", content)
self._current_path = path
self._modified = False
self._on_change()
self.status_var.set(f"開いた: {path}")
def _save(self):
if not self._current_path:
self._save_as()
return
self._write(self._current_path)
def _save_as(self):
path = filedialog.asksaveasfilename(
defaultextension=".md",
filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
if path:
self._current_path = path
self._write(path)
def _write(self, path):
try:
with open(path, "w", encoding="utf-8") as f:
f.write(self.md_text.get("1.0", tk.END).rstrip())
self._modified = False
self.status_var.set(f"保存: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _export_html(self):
path = filedialog.asksaveasfilename(
defaultextension=".html",
filetypes=[("HTML", "*.html")])
if not path:
return
md = self.md_text.get("1.0", tk.END)
html_body = self._md_to_html(md)
html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
try:
with open(path, "w", encoding="utf-8") as f:
f.write(html)
messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _md_to_html(self, md):
lines = md.splitlines()
html = []
in_code = False
for line in lines:
if line.strip().startswith("```"):
in_code = not in_code
html.append("</pre>" if not in_code else '<pre><code>')
continue
if in_code:
html.append(line)
continue
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
n = len(m.group(1))
html.append(f"<h{n}>{m.group(2)}</h{n}>")
continue
if re.match(r"^---+$", line):
html.append("<hr>")
continue
m2 = re.match(r"^> (.+)$", line)
if m2:
html.append(f"<blockquote>{m2.group(1)}</blockquote>")
continue
line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
if re.match(r"^[ \t]*[-*+] ", line):
line = f"<li>{line.lstrip(' *-+').strip()}</li>"
html.append(f"<p>{line}</p>" if line.strip() else "")
return "\n".join(html)
if __name__ == "__main__":
root = tk.Tk()
app = App091(root)
root.mainloop()
イベント処理
ボタンのcommand引数でクリックイベントを、bind('
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os
try:
from PIL import Image, ImageTk
PIL_AVAILABLE = True
except ImportError:
PIL_AVAILABLE = False
class App091:
"""Markdownエディター"""
# 簡易Markdown → HTML変換
def __init__(self, root):
self.root = root
self.root.title("Markdownエディター")
self.root.geometry("1060x660")
self.root.configure(bg="#0d1117")
self._current_path = None
self._modified = False
self._build_ui()
self._load_sample()
def _build_ui(self):
# メニューバー
menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
activebackground="#1f6feb")
file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
file_menu.add_command(label="新規", accelerator="Ctrl+N",
command=self._new)
file_menu.add_command(label="開く", accelerator="Ctrl+O",
command=self._open)
file_menu.add_command(label="保存", accelerator="Ctrl+S",
command=self._save)
file_menu.add_command(label="名前を付けて保存",
command=self._save_as)
file_menu.add_separator()
file_menu.add_command(label="HTMLエクスポート",
command=self._export_html)
menubar.add_cascade(label="ファイル", menu=file_menu)
self.root.configure(menu=menubar)
# キーバインド
self.root.bind("<Control-n>", lambda e: self._new())
self.root.bind("<Control-o>", lambda e: self._open())
self.root.bind("<Control-s>", lambda e: self._save())
header = tk.Frame(self.root, bg="#161b22", pady=6)
header.pack(fill=tk.X)
tk.Label(header, text="📝 Markdownエディター",
font=("Noto Sans JP", 12, "bold"),
bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
# ツールバー (Markdown ショートカット)
tb = tk.Frame(self.root, bg="#161b22", pady=2)
tb.pack(fill=tk.X)
buttons = [
("B", self._insert_bold, "太字"),
("I", self._insert_italic, "斜体"),
("H1", self._insert_h1, "見出し1"),
("H2", self._insert_h2, "見出し2"),
("H3", self._insert_h3, "見出し3"),
("―", self._insert_hr, "水平線"),
("○", self._insert_ul, "箇条書き"),
("1.", self._insert_ol, "番号付きリスト"),
("[]", self._insert_checkbox, "チェックボックス"),
("```", self._insert_code, "コードブロック"),
("🔗", self._insert_link, "リンク"),
]
for label, cmd, tip in buttons:
btn = tk.Button(tb, text=label, command=cmd,
bg="#21262d", fg="#c9d1d9",
relief=tk.FLAT, font=("Arial", 9),
padx=8, pady=3,
activebackground="#30363d", bd=0)
btn.pack(side=tk.LEFT, padx=1)
# 分割ビュー
paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)
# 左: Markdown入力
left = tk.Frame(paned, bg="#0d1117")
paned.add(left, weight=1)
tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
font=("Courier New", 10), relief=tk.FLAT,
insertbackground="white", wrap=tk.WORD,
tabs="4c", undo=True)
lsb = ttk.Scrollbar(left, command=self.md_text.yview)
self.md_text.configure(yscrollcommand=lsb.set)
lsb.pack(side=tk.RIGHT, fill=tk.Y)
self.md_text.pack(fill=tk.BOTH, expand=True)
self.md_text.bind("<KeyRelease>", self._on_change)
# シンタックスハイライトタグ
self.md_text.tag_configure("heading", foreground="#4fc3f7",
font=("Courier New", 11, "bold"))
self.md_text.tag_configure("bold", foreground="#ffa726",
font=("Courier New", 10, "bold"))
self.md_text.tag_configure("italic", foreground="#ab47bc",
font=("Courier New", 10, "italic"))
self.md_text.tag_configure("code", foreground="#b5e853",
background="#1e1e1e")
self.md_text.tag_configure("link", foreground="#26a69a",
underline=True)
self.md_text.tag_configure("hr", foreground="#555")
self.md_text.tag_configure("list", foreground="#ef5350")
# 右: プレビュー
right = tk.Frame(paned, bg="#1e1e1e")
paned.add(right, weight=1)
tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
font=("Arial", 10), relief=tk.FLAT,
state=tk.DISABLED, wrap=tk.WORD,
padx=8, pady=4)
psb = ttk.Scrollbar(right, command=self.preview.yview)
self.preview.configure(yscrollcommand=psb.set)
psb.pack(side=tk.RIGHT, fill=tk.Y)
self.preview.pack(fill=tk.BOTH, expand=True)
# プレビュータグ
self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
foreground="#58a6ff")
self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
foreground="#79c0ff")
self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
foreground="#a5d6ff")
self.preview.tag_configure("bold", font=("Arial", 10, "bold"))
self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
self.preview.tag_configure("code", font=("Courier New", 9),
background="#161b22",
foreground="#b5e853")
self.preview.tag_configure("hr", foreground="#30363d")
self.preview.tag_configure("link", foreground="#26a69a", underline=True)
self.preview.tag_configure("blockquote", foreground="#8b949e",
lmargin1=20, lmargin2=20)
self.status_var = tk.StringVar(value="準備完了")
tk.Label(self.root, textvariable=self.status_var,
bg="#21262d", fg="#8b949e", font=("Courier New", 9),
anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)
def _load_sample(self):
sample = """# Markdown エディター
## 概要
これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。
---
## 機能
- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート
## コード例
```python
def hello(name: str) -> str:
return f"Hello, {name}!"
```
## リンク
[Python公式サイト](https://www.python.org)
> これは引用文です。
1. 項目1
2. 項目2
3. 項目3
"""
self.md_text.insert("1.0", sample)
self._update_preview()
self._apply_highlight()
def _on_change(self, _=None):
self._modified = True
self._update_preview()
self._apply_highlight()
chars = len(self.md_text.get("1.0", tk.END))
lines = int(self.md_text.index(tk.END).split(".")[0])
self.status_var.set(f"行: {lines} 文字: {chars} {'*変更あり' if self._modified else ''}")
def _apply_highlight(self):
text = self.md_text
for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
text.tag_remove(tag, "1.0", tk.END)
content = text.get("1.0", tk.END)
def highlight(pattern, tag, flags=0):
for m in re.finditer(pattern, content, flags | re.MULTILINE):
start = f"1.0 + {m.start()} chars"
end = f"1.0 + {m.end()} chars"
text.tag_add(tag, start, end)
highlight(r"^#{1,6} .+$", "heading")
highlight(r"\*\*[^*]+\*\*", "bold")
highlight(r"\*[^*]+\*", "italic")
highlight(r"`[^`]+`", "code")
highlight(r"\[.+?\]\(.+?\)", "link")
highlight(r"^---+$", "hr")
highlight(r"^[ \t]*[-*+] ", "list")
highlight(r"^\d+\. ", "list")
def _update_preview(self):
md = self.md_text.get("1.0", tk.END)
self.preview.configure(state=tk.NORMAL)
self.preview.delete("1.0", tk.END)
for line in md.splitlines():
self._render_line(line)
self.preview.insert(tk.END, "\n")
self.preview.configure(state=tk.DISABLED)
def _render_line(self, line):
pv = self.preview
# 見出し
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
level = len(m.group(1))
tag = f"h{min(level, 3)}"
pv.insert(tk.END, m.group(2), tag)
return
# HR
if re.match(r"^---+$", line):
pv.insert(tk.END, "─" * 40, "hr")
return
# 引用
m = re.match(r"^> (.+)$", line)
if m:
pv.insert(tk.END, "│ " + m.group(1), "blockquote")
return
# コードブロック
if line.strip().startswith("```"):
pv.insert(tk.END, line, "code")
return
# インライン
parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
for part in parts:
if re.match(r"\*\*[^*]+\*\*", part):
pv.insert(tk.END, part[2:-2], "bold")
elif re.match(r"\*[^*]+\*", part):
pv.insert(tk.END, part[1:-1], "italic")
elif re.match(r"`[^`]+`", part):
pv.insert(tk.END, part[1:-1], "code")
elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
txt = re.match(r"\[([^\]]+)\]", part).group(1)
pv.insert(tk.END, txt, "link")
else:
pv.insert(tk.END, part)
# ── ツールバーアクション ─────────────────────────────────
def _wrap_selection(self, before, after=""):
try:
sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
except tk.TclError:
self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
self._on_change()
def _insert_bold(self): self._wrap_selection("**")
def _insert_italic(self): self._wrap_selection("*")
def _insert_h1(self): self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
def _insert_h2(self): self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
def _insert_h3(self): self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
def _insert_hr(self): self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
def _insert_ul(self): self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
def _insert_ol(self): self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
def _insert_code(self):
self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
self._on_change()
def _insert_link(self):
self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
self._on_change()
# ── ファイル操作 ─────────────────────────────────────────
def _new(self):
if self._modified:
if not messagebox.askyesno("確認", "変更を破棄しますか？"):
return
self.md_text.delete("1.0", tk.END)
self._current_path = None
self._modified = False
self.status_var.set("新規ファイル")
def _open(self):
path = filedialog.askopenfilename(
filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
("すべて", "*.*")])
if not path:
return
for enc in ("utf-8", "shift-jis", "cp932"):
try:
with open(path, encoding=enc) as f:
content = f.read()
break
except UnicodeDecodeError:
continue
self.md_text.delete("1.0", tk.END)
self.md_text.insert("1.0", content)
self._current_path = path
self._modified = False
self._on_change()
self.status_var.set(f"開いた: {path}")
def _save(self):
if not self._current_path:
self._save_as()
return
self._write(self._current_path)
def _save_as(self):
path = filedialog.asksaveasfilename(
defaultextension=".md",
filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
if path:
self._current_path = path
self._write(path)
def _write(self, path):
try:
with open(path, "w", encoding="utf-8") as f:
f.write(self.md_text.get("1.0", tk.END).rstrip())
self._modified = False
self.status_var.set(f"保存: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _export_html(self):
path = filedialog.asksaveasfilename(
defaultextension=".html",
filetypes=[("HTML", "*.html")])
if not path:
return
md = self.md_text.get("1.0", tk.END)
html_body = self._md_to_html(md)
html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
try:
with open(path, "w", encoding="utf-8") as f:
f.write(html)
messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _md_to_html(self, md):
lines = md.splitlines()
html = []
in_code = False
for line in lines:
if line.strip().startswith("```"):
in_code = not in_code
html.append("</pre>" if not in_code else '<pre><code>')
continue
if in_code:
html.append(line)
continue
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
n = len(m.group(1))
html.append(f"<h{n}>{m.group(2)}</h{n}>")
continue
if re.match(r"^---+$", line):
html.append("<hr>")
continue
m2 = re.match(r"^> (.+)$", line)
if m2:
html.append(f"<blockquote>{m2.group(1)}</blockquote>")
continue
line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
if re.match(r"^[ \t]*[-*+] ", line):
line = f"<li>{line.lstrip(' *-+').strip()}</li>"
html.append(f"<p>{line}</p>" if line.strip() else "")
return "\n".join(html)
if __name__ == "__main__":
root = tk.Tk()
app = App091(root)
root.mainloop()
Textウィジェットでの結果表示
tk.Textウィジェットをstate=DISABLED（読み取り専用）で作成し、更新時はNORMALに変更してinsert()で内容を書き込み、再びDISABLEDに戻します。
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os
try:
from PIL import Image, ImageTk
PIL_AVAILABLE = True
except ImportError:
PIL_AVAILABLE = False
class App091:
"""Markdownエディター"""
# 簡易Markdown → HTML変換
def __init__(self, root):
self.root = root
self.root.title("Markdownエディター")
self.root.geometry("1060x660")
self.root.configure(bg="#0d1117")
self._current_path = None
self._modified = False
self._build_ui()
self._load_sample()
def _build_ui(self):
# メニューバー
menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
activebackground="#1f6feb")
file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
file_menu.add_command(label="新規", accelerator="Ctrl+N",
command=self._new)
file_menu.add_command(label="開く", accelerator="Ctrl+O",
command=self._open)
file_menu.add_command(label="保存", accelerator="Ctrl+S",
command=self._save)
file_menu.add_command(label="名前を付けて保存",
command=self._save_as)
file_menu.add_separator()
file_menu.add_command(label="HTMLエクスポート",
command=self._export_html)
menubar.add_cascade(label="ファイル", menu=file_menu)
self.root.configure(menu=menubar)
# キーバインド
self.root.bind("<Control-n>", lambda e: self._new())
self.root.bind("<Control-o>", lambda e: self._open())
self.root.bind("<Control-s>", lambda e: self._save())
header = tk.Frame(self.root, bg="#161b22", pady=6)
header.pack(fill=tk.X)
tk.Label(header, text="📝 Markdownエディター",
font=("Noto Sans JP", 12, "bold"),
bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
# ツールバー (Markdown ショートカット)
tb = tk.Frame(self.root, bg="#161b22", pady=2)
tb.pack(fill=tk.X)
buttons = [
("B", self._insert_bold, "太字"),
("I", self._insert_italic, "斜体"),
("H1", self._insert_h1, "見出し1"),
("H2", self._insert_h2, "見出し2"),
("H3", self._insert_h3, "見出し3"),
("―", self._insert_hr, "水平線"),
("○", self._insert_ul, "箇条書き"),
("1.", self._insert_ol, "番号付きリスト"),
("[]", self._insert_checkbox, "チェックボックス"),
("```", self._insert_code, "コードブロック"),
("🔗", self._insert_link, "リンク"),
]
for label, cmd, tip in buttons:
btn = tk.Button(tb, text=label, command=cmd,
bg="#21262d", fg="#c9d1d9",
relief=tk.FLAT, font=("Arial", 9),
padx=8, pady=3,
activebackground="#30363d", bd=0)
btn.pack(side=tk.LEFT, padx=1)
# 分割ビュー
paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)
# 左: Markdown入力
left = tk.Frame(paned, bg="#0d1117")
paned.add(left, weight=1)
tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
font=("Courier New", 10), relief=tk.FLAT,
insertbackground="white", wrap=tk.WORD,
tabs="4c", undo=True)
lsb = ttk.Scrollbar(left, command=self.md_text.yview)
self.md_text.configure(yscrollcommand=lsb.set)
lsb.pack(side=tk.RIGHT, fill=tk.Y)
self.md_text.pack(fill=tk.BOTH, expand=True)
self.md_text.bind("<KeyRelease>", self._on_change)
# シンタックスハイライトタグ
self.md_text.tag_configure("heading", foreground="#4fc3f7",
font=("Courier New", 11, "bold"))
self.md_text.tag_configure("bold", foreground="#ffa726",
font=("Courier New", 10, "bold"))
self.md_text.tag_configure("italic", foreground="#ab47bc",
font=("Courier New", 10, "italic"))
self.md_text.tag_configure("code", foreground="#b5e853",
background="#1e1e1e")
self.md_text.tag_configure("link", foreground="#26a69a",
underline=True)
self.md_text.tag_configure("hr", foreground="#555")
self.md_text.tag_configure("list", foreground="#ef5350")
# 右: プレビュー
right = tk.Frame(paned, bg="#1e1e1e")
paned.add(right, weight=1)
tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
font=("Arial", 10), relief=tk.FLAT,
state=tk.DISABLED, wrap=tk.WORD,
padx=8, pady=4)
psb = ttk.Scrollbar(right, command=self.preview.yview)
self.preview.configure(yscrollcommand=psb.set)
psb.pack(side=tk.RIGHT, fill=tk.Y)
self.preview.pack(fill=tk.BOTH, expand=True)
# プレビュータグ
self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
foreground="#58a6ff")
self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
foreground="#79c0ff")
self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
foreground="#a5d6ff")
self.preview.tag_configure("bold", font=("Arial", 10, "bold"))
self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
self.preview.tag_configure("code", font=("Courier New", 9),
background="#161b22",
foreground="#b5e853")
self.preview.tag_configure("hr", foreground="#30363d")
self.preview.tag_configure("link", foreground="#26a69a", underline=True)
self.preview.tag_configure("blockquote", foreground="#8b949e",
lmargin1=20, lmargin2=20)
self.status_var = tk.StringVar(value="準備完了")
tk.Label(self.root, textvariable=self.status_var,
bg="#21262d", fg="#8b949e", font=("Courier New", 9),
anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)
def _load_sample(self):
sample = """# Markdown エディター
## 概要
これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。
---
## 機能
- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート
## コード例
```python
def hello(name: str) -> str:
return f"Hello, {name}!"
```
## リンク
[Python公式サイト](https://www.python.org)
> これは引用文です。
1. 項目1
2. 項目2
3. 項目3
"""
self.md_text.insert("1.0", sample)
self._update_preview()
self._apply_highlight()
def _on_change(self, _=None):
self._modified = True
self._update_preview()
self._apply_highlight()
chars = len(self.md_text.get("1.0", tk.END))
lines = int(self.md_text.index(tk.END).split(".")[0])
self.status_var.set(f"行: {lines} 文字: {chars} {'*変更あり' if self._modified else ''}")
def _apply_highlight(self):
text = self.md_text
for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
text.tag_remove(tag, "1.0", tk.END)
content = text.get("1.0", tk.END)
def highlight(pattern, tag, flags=0):
for m in re.finditer(pattern, content, flags | re.MULTILINE):
start = f"1.0 + {m.start()} chars"
end = f"1.0 + {m.end()} chars"
text.tag_add(tag, start, end)
highlight(r"^#{1,6} .+$", "heading")
highlight(r"\*\*[^*]+\*\*", "bold")
highlight(r"\*[^*]+\*", "italic")
highlight(r"`[^`]+`", "code")
highlight(r"\[.+?\]\(.+?\)", "link")
highlight(r"^---+$", "hr")
highlight(r"^[ \t]*[-*+] ", "list")
highlight(r"^\d+\. ", "list")
def _update_preview(self):
md = self.md_text.get("1.0", tk.END)
self.preview.configure(state=tk.NORMAL)
self.preview.delete("1.0", tk.END)
for line in md.splitlines():
self._render_line(line)
self.preview.insert(tk.END, "\n")
self.preview.configure(state=tk.DISABLED)
def _render_line(self, line):
pv = self.preview
# 見出し
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
level = len(m.group(1))
tag = f"h{min(level, 3)}"
pv.insert(tk.END, m.group(2), tag)
return
# HR
if re.match(r"^---+$", line):
pv.insert(tk.END, "─" * 40, "hr")
return
# 引用
m = re.match(r"^> (.+)$", line)
if m:
pv.insert(tk.END, "│ " + m.group(1), "blockquote")
return
# コードブロック
if line.strip().startswith("```"):
pv.insert(tk.END, line, "code")
return
# インライン
parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
for part in parts:
if re.match(r"\*\*[^*]+\*\*", part):
pv.insert(tk.END, part[2:-2], "bold")
elif re.match(r"\*[^*]+\*", part):
pv.insert(tk.END, part[1:-1], "italic")
elif re.match(r"`[^`]+`", part):
pv.insert(tk.END, part[1:-1], "code")
elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
txt = re.match(r"\[([^\]]+)\]", part).group(1)
pv.insert(tk.END, txt, "link")
else:
pv.insert(tk.END, part)
# ── ツールバーアクション ─────────────────────────────────
def _wrap_selection(self, before, after=""):
try:
sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
except tk.TclError:
self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
self._on_change()
def _insert_bold(self): self._wrap_selection("**")
def _insert_italic(self): self._wrap_selection("*")
def _insert_h1(self): self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
def _insert_h2(self): self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
def _insert_h3(self): self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
def _insert_hr(self): self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
def _insert_ul(self): self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
def _insert_ol(self): self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
def _insert_code(self):
self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
self._on_change()
def _insert_link(self):
self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
self._on_change()
# ── ファイル操作 ─────────────────────────────────────────
def _new(self):
if self._modified:
if not messagebox.askyesno("確認", "変更を破棄しますか？"):
return
self.md_text.delete("1.0", tk.END)
self._current_path = None
self._modified = False
self.status_var.set("新規ファイル")
def _open(self):
path = filedialog.askopenfilename(
filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
("すべて", "*.*")])
if not path:
return
for enc in ("utf-8", "shift-jis", "cp932"):
try:
with open(path, encoding=enc) as f:
content = f.read()
break
except UnicodeDecodeError:
continue
self.md_text.delete("1.0", tk.END)
self.md_text.insert("1.0", content)
self._current_path = path
self._modified = False
self._on_change()
self.status_var.set(f"開いた: {path}")
def _save(self):
if not self._current_path:
self._save_as()
return
self._write(self._current_path)
def _save_as(self):
path = filedialog.asksaveasfilename(
defaultextension=".md",
filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
if path:
self._current_path = path
self._write(path)
def _write(self, path):
try:
with open(path, "w", encoding="utf-8") as f:
f.write(self.md_text.get("1.0", tk.END).rstrip())
self._modified = False
self.status_var.set(f"保存: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _export_html(self):
path = filedialog.asksaveasfilename(
defaultextension=".html",
filetypes=[("HTML", "*.html")])
if not path:
return
md = self.md_text.get("1.0", tk.END)
html_body = self._md_to_html(md)
html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
try:
with open(path, "w", encoding="utf-8") as f:
f.write(html)
messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _md_to_html(self, md):
lines = md.splitlines()
html = []
in_code = False
for line in lines:
if line.strip().startswith("```"):
in_code = not in_code
html.append("</pre>" if not in_code else '<pre><code>')
continue
if in_code:
html.append(line)
continue
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
n = len(m.group(1))
html.append(f"<h{n}>{m.group(2)}</h{n}>")
continue
if re.match(r"^---+$", line):
html.append("<hr>")
continue
m2 = re.match(r"^> (.+)$", line)
if m2:
html.append(f"<blockquote>{m2.group(1)}</blockquote>")
continue
line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
if re.match(r"^[ \t]*[-*+] ", line):
line = f"<li>{line.lstrip(' *-+').strip()}</li>"
html.append(f"<p>{line}</p>" if line.strip() else "")
return "\n".join(html)
if __name__ == "__main__":
root = tk.Tk()
app = App091(root)
root.mainloop()
例外処理とエラーハンドリング
try-exceptでValueErrorとExceptionを捕捉し、messagebox.showerror()でエラーメッセージを表示します。予期しないエラーも処理することで、アプリの堅牢性が向上します。
import tkinter as tk
from tkinter import ttk, messagebox, filedialog
import re
import os
try:
from PIL import Image, ImageTk
PIL_AVAILABLE = True
except ImportError:
PIL_AVAILABLE = False
class App091:
"""Markdownエディター"""
# 簡易Markdown → HTML変換
def __init__(self, root):
self.root = root
self.root.title("Markdownエディター")
self.root.geometry("1060x660")
self.root.configure(bg="#0d1117")
self._current_path = None
self._modified = False
self._build_ui()
self._load_sample()
def _build_ui(self):
# メニューバー
menubar = tk.Menu(self.root, bg="#161b22", fg="#c9d1d9",
activebackground="#1f6feb")
file_menu = tk.Menu(menubar, tearoff=False, bg="#161b22", fg="#c9d1d9")
file_menu.add_command(label="新規", accelerator="Ctrl+N",
command=self._new)
file_menu.add_command(label="開く", accelerator="Ctrl+O",
command=self._open)
file_menu.add_command(label="保存", accelerator="Ctrl+S",
command=self._save)
file_menu.add_command(label="名前を付けて保存",
command=self._save_as)
file_menu.add_separator()
file_menu.add_command(label="HTMLエクスポート",
command=self._export_html)
menubar.add_cascade(label="ファイル", menu=file_menu)
self.root.configure(menu=menubar)
# キーバインド
self.root.bind("<Control-n>", lambda e: self._new())
self.root.bind("<Control-o>", lambda e: self._open())
self.root.bind("<Control-s>", lambda e: self._save())
header = tk.Frame(self.root, bg="#161b22", pady=6)
header.pack(fill=tk.X)
tk.Label(header, text="📝 Markdownエディター",
font=("Noto Sans JP", 12, "bold"),
bg="#161b22", fg="#4fc3f7").pack(side=tk.LEFT, padx=12)
# ツールバー (Markdown ショートカット)
tb = tk.Frame(self.root, bg="#161b22", pady=2)
tb.pack(fill=tk.X)
buttons = [
("B", self._insert_bold, "太字"),
("I", self._insert_italic, "斜体"),
("H1", self._insert_h1, "見出し1"),
("H2", self._insert_h2, "見出し2"),
("H3", self._insert_h3, "見出し3"),
("―", self._insert_hr, "水平線"),
("○", self._insert_ul, "箇条書き"),
("1.", self._insert_ol, "番号付きリスト"),
("[]", self._insert_checkbox, "チェックボックス"),
("```", self._insert_code, "コードブロック"),
("🔗", self._insert_link, "リンク"),
]
for label, cmd, tip in buttons:
btn = tk.Button(tb, text=label, command=cmd,
bg="#21262d", fg="#c9d1d9",
relief=tk.FLAT, font=("Arial", 9),
padx=8, pady=3,
activebackground="#30363d", bd=0)
btn.pack(side=tk.LEFT, padx=1)
# 分割ビュー
paned = ttk.PanedWindow(self.root, orient=tk.HORIZONTAL)
paned.pack(fill=tk.BOTH, expand=True, padx=4, pady=4)
# 左: Markdown入力
left = tk.Frame(paned, bg="#0d1117")
paned.add(left, weight=1)
tk.Label(left, text="Markdown", bg="#0d1117", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.md_text = tk.Text(left, bg="#0d1117", fg="#c9d1d9",
font=("Courier New", 10), relief=tk.FLAT,
insertbackground="white", wrap=tk.WORD,
tabs="4c", undo=True)
lsb = ttk.Scrollbar(left, command=self.md_text.yview)
self.md_text.configure(yscrollcommand=lsb.set)
lsb.pack(side=tk.RIGHT, fill=tk.Y)
self.md_text.pack(fill=tk.BOTH, expand=True)
self.md_text.bind("<KeyRelease>", self._on_change)
# シンタックスハイライトタグ
self.md_text.tag_configure("heading", foreground="#4fc3f7",
font=("Courier New", 11, "bold"))
self.md_text.tag_configure("bold", foreground="#ffa726",
font=("Courier New", 10, "bold"))
self.md_text.tag_configure("italic", foreground="#ab47bc",
font=("Courier New", 10, "italic"))
self.md_text.tag_configure("code", foreground="#b5e853",
background="#1e1e1e")
self.md_text.tag_configure("link", foreground="#26a69a",
underline=True)
self.md_text.tag_configure("hr", foreground="#555")
self.md_text.tag_configure("list", foreground="#ef5350")
# 右: プレビュー
right = tk.Frame(paned, bg="#1e1e1e")
paned.add(right, weight=1)
tk.Label(right, text="プレビュー", bg="#1e1e1e", fg="#8b949e",
font=("Arial", 8)).pack(anchor="w")
self.preview = tk.Text(right, bg="#1e1e1e", fg="#c9d1d9",
font=("Arial", 10), relief=tk.FLAT,
state=tk.DISABLED, wrap=tk.WORD,
padx=8, pady=4)
psb = ttk.Scrollbar(right, command=self.preview.yview)
self.preview.configure(yscrollcommand=psb.set)
psb.pack(side=tk.RIGHT, fill=tk.Y)
self.preview.pack(fill=tk.BOTH, expand=True)
# プレビュータグ
self.preview.tag_configure("h1", font=("Arial", 18, "bold"),
foreground="#58a6ff")
self.preview.tag_configure("h2", font=("Arial", 15, "bold"),
foreground="#79c0ff")
self.preview.tag_configure("h3", font=("Arial", 12, "bold"),
foreground="#a5d6ff")
self.preview.tag_configure("bold", font=("Arial", 10, "bold"))
self.preview.tag_configure("italic", font=("Arial", 10, "italic"))
self.preview.tag_configure("code", font=("Courier New", 9),
background="#161b22",
foreground="#b5e853")
self.preview.tag_configure("hr", foreground="#30363d")
self.preview.tag_configure("link", foreground="#26a69a", underline=True)
self.preview.tag_configure("blockquote", foreground="#8b949e",
lmargin1=20, lmargin2=20)
self.status_var = tk.StringVar(value="準備完了")
tk.Label(self.root, textvariable=self.status_var,
bg="#21262d", fg="#8b949e", font=("Courier New", 9),
anchor="w", padx=8).pack(fill=tk.X, side=tk.BOTTOM)
def _load_sample(self):
sample = """# Markdown エディター
## 概要
これは **Markdownエディター** です。左側で記述すると右側に *プレビュー* が表示されます。
---
## 機能
- リアルタイムプレビュー
- シンタックスハイライト
- ファイルの開く/保存
- HTMLエクスポート
## コード例
```python
def hello(name: str) -> str:
return f"Hello, {name}!"
```
## リンク
[Python公式サイト](https://www.python.org)
> これは引用文です。
1. 項目1
2. 項目2
3. 項目3
"""
self.md_text.insert("1.0", sample)
self._update_preview()
self._apply_highlight()
def _on_change(self, _=None):
self._modified = True
self._update_preview()
self._apply_highlight()
chars = len(self.md_text.get("1.0", tk.END))
lines = int(self.md_text.index(tk.END).split(".")[0])
self.status_var.set(f"行: {lines} 文字: {chars} {'*変更あり' if self._modified else ''}")
def _apply_highlight(self):
text = self.md_text
for tag in ("heading", "bold", "italic", "code", "link", "hr", "list"):
text.tag_remove(tag, "1.0", tk.END)
content = text.get("1.0", tk.END)
def highlight(pattern, tag, flags=0):
for m in re.finditer(pattern, content, flags | re.MULTILINE):
start = f"1.0 + {m.start()} chars"
end = f"1.0 + {m.end()} chars"
text.tag_add(tag, start, end)
highlight(r"^#{1,6} .+$", "heading")
highlight(r"\*\*[^*]+\*\*", "bold")
highlight(r"\*[^*]+\*", "italic")
highlight(r"`[^`]+`", "code")
highlight(r"\[.+?\]\(.+?\)", "link")
highlight(r"^---+$", "hr")
highlight(r"^[ \t]*[-*+] ", "list")
highlight(r"^\d+\. ", "list")
def _update_preview(self):
md = self.md_text.get("1.0", tk.END)
self.preview.configure(state=tk.NORMAL)
self.preview.delete("1.0", tk.END)
for line in md.splitlines():
self._render_line(line)
self.preview.insert(tk.END, "\n")
self.preview.configure(state=tk.DISABLED)
def _render_line(self, line):
pv = self.preview
# 見出し
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
level = len(m.group(1))
tag = f"h{min(level, 3)}"
pv.insert(tk.END, m.group(2), tag)
return
# HR
if re.match(r"^---+$", line):
pv.insert(tk.END, "─" * 40, "hr")
return
# 引用
m = re.match(r"^> (.+)$", line)
if m:
pv.insert(tk.END, "│ " + m.group(1), "blockquote")
return
# コードブロック
if line.strip().startswith("```"):
pv.insert(tk.END, line, "code")
return
# インライン
parts = re.split(r"(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))", line)
for part in parts:
if re.match(r"\*\*[^*]+\*\*", part):
pv.insert(tk.END, part[2:-2], "bold")
elif re.match(r"\*[^*]+\*", part):
pv.insert(tk.END, part[1:-1], "italic")
elif re.match(r"`[^`]+`", part):
pv.insert(tk.END, part[1:-1], "code")
elif re.match(r"\[[^\]]+\]\([^)]+\)", part):
txt = re.match(r"\[([^\]]+)\]", part).group(1)
pv.insert(tk.END, txt, "link")
else:
pv.insert(tk.END, part)
# ── ツールバーアクション ─────────────────────────────────
def _wrap_selection(self, before, after=""):
try:
sel = self.md_text.get(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.delete(tk.SEL_FIRST, tk.SEL_LAST)
self.md_text.insert(tk.INSERT, f"{before}{sel}{after or before}")
except tk.TclError:
self.md_text.insert(tk.INSERT, f"{before}テキスト{after or before}")
self._on_change()
def _insert_bold(self): self._wrap_selection("**")
def _insert_italic(self): self._wrap_selection("*")
def _insert_h1(self): self.md_text.insert(tk.INSERT, "\n# 見出し1\n"); self._on_change()
def _insert_h2(self): self.md_text.insert(tk.INSERT, "\n## 見出し2\n"); self._on_change()
def _insert_h3(self): self.md_text.insert(tk.INSERT, "\n### 見出し3\n"); self._on_change()
def _insert_hr(self): self.md_text.insert(tk.INSERT, "\n---\n"); self._on_change()
def _insert_ul(self): self.md_text.insert(tk.INSERT, "\n- 項目\n"); self._on_change()
def _insert_ol(self): self.md_text.insert(tk.INSERT, "\n1. 項目\n"); self._on_change()
def _insert_checkbox(self): self.md_text.insert(tk.INSERT, "\n- [ ] タスク\n"); self._on_change()
def _insert_code(self):
self.md_text.insert(tk.INSERT, "\n```python\nコード\n```\n")
self._on_change()
def _insert_link(self):
self.md_text.insert(tk.INSERT, "[テキスト](https://example.com)")
self._on_change()
# ── ファイル操作 ─────────────────────────────────────────
def _new(self):
if self._modified:
if not messagebox.askyesno("確認", "変更を破棄しますか？"):
return
self.md_text.delete("1.0", tk.END)
self._current_path = None
self._modified = False
self.status_var.set("新規ファイル")
def _open(self):
path = filedialog.askopenfilename(
filetypes=[("Markdown", "*.md *.markdown"), ("テキスト", "*.txt"),
("すべて", "*.*")])
if not path:
return
for enc in ("utf-8", "shift-jis", "cp932"):
try:
with open(path, encoding=enc) as f:
content = f.read()
break
except UnicodeDecodeError:
continue
self.md_text.delete("1.0", tk.END)
self.md_text.insert("1.0", content)
self._current_path = path
self._modified = False
self._on_change()
self.status_var.set(f"開いた: {path}")
def _save(self):
if not self._current_path:
self._save_as()
return
self._write(self._current_path)
def _save_as(self):
path = filedialog.asksaveasfilename(
defaultextension=".md",
filetypes=[("Markdown", "*.md"), ("テキスト", "*.txt")])
if path:
self._current_path = path
self._write(path)
def _write(self, path):
try:
with open(path, "w", encoding="utf-8") as f:
f.write(self.md_text.get("1.0", tk.END).rstrip())
self._modified = False
self.status_var.set(f"保存: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _export_html(self):
path = filedialog.asksaveasfilename(
defaultextension=".html",
filetypes=[("HTML", "*.html")])
if not path:
return
md = self.md_text.get("1.0", tk.END)
html_body = self._md_to_html(md)
html = f"""<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Markdown Export</title>
<style>body{{font-family:sans-serif;max-width:800px;margin:auto;padding:2em;}}
pre{{background:#1e1e1e;color:#b5e853;padding:1em;border-radius:4px;}}
blockquote{{border-left:4px solid #ccc;padding-left:1em;color:#666;}}</style>
</head><body>{html_body}</body></html>"""
try:
with open(path, "w", encoding="utf-8") as f:
f.write(html)
messagebox.showinfo("完了", f"HTMLエクスポート: {path}")
except Exception as e:
messagebox.showerror("エラー", str(e))
def _md_to_html(self, md):
lines = md.splitlines()
html = []
in_code = False
for line in lines:
if line.strip().startswith("```"):
in_code = not in_code
html.append("</pre>" if not in_code else '<pre><code>')
continue
if in_code:
html.append(line)
continue
m = re.match(r"^(#{1,6}) (.+)$", line)
if m:
n = len(m.group(1))
html.append(f"<h{n}>{m.group(2)}</h{n}>")
continue
if re.match(r"^---+$", line):
html.append("<hr>")
continue
m2 = re.match(r"^> (.+)$", line)
if m2:
html.append(f"<blockquote>{m2.group(1)}</blockquote>")
continue
line = re.sub(r"\*\*([^*]+)\*\*", r"<strong>\1</strong>", line)
line = re.sub(r"\*([^*]+)\*", r"<em>\1</em>", line)
line = re.sub(r"`([^`]+)`", r"<code>\1</code>", line)
line = re.sub(r"\[([^\]]+)\]\(([^)]+)\)", r'<a href="\2">\1</a>', line)
if re.match(r"^[ \t]*[-*+] ", line):
line = f"<li>{line.lstrip(' *-+').strip()}</li>"
html.append(f"<p>{line}</p>" if line.strip() else "")
return "\n".join(html)
if __name__ == "__main__":
root = tk.Tk()
app = App091(root)
root.mainloop()
6. ステップバイステップガイド
このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。
-
1ファイルを作成する
新しいファイルを作成して app091.py と保存します。
-
2クラスの骨格を作る
App091クラスを定義し、__init__とmainloop()の最小構成を作ります。
-
3タイトルバーを作る
Frameを使ってカラーバー付きのタイトルエリアを作ります。
-
4入力フォームを実装する
LabelFrameとEntryウィジェットで入力エリアを作ります。
-
5処理ロジックを実装する
_execute()メソッドにメインロジックを実装します。
-
6結果表示を実装する
TextウィジェットかLabelに結果を表示する_show_result()を実装します。
-
7エラー処理を追加する
try-exceptとmessageboxでエラーハンドリングを追加します。
7. カスタマイズアイデア
基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。
💡 ダークモードを追加する
bg色・fg色を辞書で管理し、ボタン1つでダークモード・ライトモードを切り替えられるようにしましょう。
💡 データの保存機能
処理結果をCSV・TXTファイルに保存する機能を追加しましょう。filedialog.asksaveasfilename()でファイル保存ダイアログが使えます。
💡 設定ダイアログ
フォントサイズや色などの設定をユーザーが変更できるオプションダイアログを追加しましょう。
8. よくある問題と解決法
❌ 日本語フォントが表示されない
原因：システムに日本語フォントが見つからない場合があります。
解決法：font引数を省略するかシステムに合ったフォントを指定してください。
❌ ライブラリのインポートエラー
原因：必要なライブラリがインストールされていません。
解決法：pip install コマンドで必要なライブラリをインストールしてください。 (pip install markdown2)
❌ ウィンドウサイズが合わない
原因：画面解像度や表示スケールによって異なる場合があります。
解決法：root.geometry()で適切なサイズに調整してください。
9. 練習問題
アプリの理解を深めるための練習問題です。
-
課題1：機能拡張
Markdownエディターに新しい機能を1つ追加してみましょう。
-
課題2：UIの改善
色・フォント・レイアウトを変更して、より使いやすいUIにカスタマイズしましょう。
-
課題3：保存機能の追加
処理結果をファイルに保存する機能を追加しましょう。