ローカルでマークダウン記法の文章を簡単にプレビューするアプリPython で作成したい。

## 背景
よくGenerative AIにマークダウン記法で出力してもらうのですが、すぐにそれをビューするものが無いので作成しました。

ウェブにはアプリあるのですが、流出リスクがあるのでPythonを用いて簡易的なビューアプリを作りました。
今回はその備忘録と同じ悩みを持つ方がいたらと思いシェアです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214013/1ccda773-599e-2164-c25f-f82422477e6a.png)



## 機能概要

このアプリケーションは、ユーザーが入力したMarkdown形式のテキストをリアルタイムでHTMLに変換し、同一ウィンドウ内でプレビューを表示するPython製のGUIツールです。主な機能は以下の通りです：

- **入力フィールド**：Markdown形式のテキストを入力するエリア。
- **プレビューボタン**：クリックすると、入力されたMarkdownをHTMLに変換し、プレビューを表示。
- **プレビューペイン**：変換されたHTMLを表示するエリア。
- **ウィンドウサイズ**：ウィンドウのサイズを自由に変更可能。
- **最大化ボタン**：ウィンドウを最大化するボタン。

## フォルダ構成

以下のようなディレクトリ構成を採用します：

```
markdown_previewer/
├── main.py
├── requirements.txt
└── README.md
```

- `main.py`：アプリケーションのメインコード。
- `requirements.txt`：必要なPythonパッケージを記載したファイル。
- `README.md`：プロジェクトの概要や使い方を記載したファイル。

## 各ファイルの内容

### `requirements.txt`

```
markdown
tkhtmlview
```

- `markdown`：MarkdownをHTMLに変換するためのライブラリ。
- `tkhtmlview`：TkinterでHTMLを表示するためのライブラリ。

### `main.py`

```python
import tkinter as tk
from tkinter import ttk
import markdown
from tkhtmlview import HTMLLabel

def preview_markdown():
    markdown_text = text_input.get("1.0", tk.END)
    html = markdown.markdown(markdown_text)
    preview_label.set_html(html)

def toggle_maximize():
    if root.state() == 'normal':
        root.state('zoomed')  # 最大化
    else:
        root.state('normal')  # 通常サイズ

root = tk.Tk()
root.title("Markdown Previewer")
root.geometry("1280x720")  # 初期ウィンドウサイズ
root.resizable(True, True)  # サイズ変更を可能にする

notebook = ttk.Notebook(root)
notebook.pack(fill="both", expand=True)

input_frame = ttk.Frame(notebook)
preview_frame = ttk.Frame(notebook)
notebook.add(input_frame, text="Input")
notebook.add(preview_frame, text="Preview")

text_input = tk.Text(input_frame, wrap=tk.WORD)
text_input.pack(fill="both", expand=True, padx=10, pady=10)
preview_button = ttk.Button(input_frame, text="Preview", command=preview_markdown)
preview_button.pack(pady=10)
maximize_button = ttk.Button(input_frame, text="Maximize", command=toggle_maximize)
maximize_button.pack(pady=10)

preview_label = HTMLLabel(preview_frame)
preview_label.pack(fill="both", expand=True, padx=10, pady=10)

root.mainloop()
```

### `README.md`

```markdown
# Markdown Previewer

このアプリケーションは、ユーザーが入力したMarkdown形式のテキストをリアルタイムでHTMLに変換し、同一ウィンドウ内でプレビューを表示するPython製のGUIツールです。

## 必要なパッケージ

- `markdown`：MarkdownをHTMLに変換するためのライブラリ。
- `tkhtmlview`：TkinterでHTMLを表示するためのライブラリ。

## インストール方法

以下のコマンドで必要なパッケージをインストールしてください：
pip install -r requirements.txt


## 使い方

1. `main.py`を実行します。
2. 「Input」タブでMarkdown形式のテキストを入力します。
3. 「Preview」タブで変換されたHTMLのプレビューを確認します。
4. 「Maximize」ボタンでウィンドウを最大化できます。
```

## 使い方

1. **必要なパッケージのインストール**：`requirements.txt`に記載されたパッケージをインストールします。

   ```bash
   pip install -r requirements.txt
   ```

2. **アプリケーションの起動**：`main.py`を実行します。

   ```bash
   python main.py
   ```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214013/22695dd1-f95e-b743-46d5-5935a3db8ba5.png)

3. **Markdownの入力**：「Input」タブでMarkdown形式のテキストを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214013/1243966f-f20a-35ea-fd41-98c53227e439.png)

4. **プレビューの確認**：「Preview」タブで変換されたHTMLのプレビューを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214013/a047a670-cc77-0688-196d-15747bf4ee90.png)

5. **ウィンドウの操作**：「Maximize」ボタンでウィンドウを最大化できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214013/0db21c18-d25a-796b-6278-0f5dd62b8951.png)