はじめに
最近、Geminiなどの回答を同僚に共有する時などに、ChatWorkなどにそのまま貼り付けるとMarkdownで書かれている関係上、ちょっと読みにくいなぁと思うことがあった。
また、Markdownでメモやドキュメントを書く場面も増えてきて、「プレビューを見ながら編集したい」「そのままPDFにしたい」と思うことも多々発生していた。
ちょうどいいツール無いかなぁと思い探してみたが、これ！っていうのに出くわさなかったので、作ってみた。
せっかくなので、ここで共有したいと思う。
概要
Markdown Viewer は、
- 編集とプレビューが一体
- Mermaid図表に対応
- そのまま印刷（PDF作成）が可能
主な機能
1. リアルタイムプレビュー
左側にMarkdownを入力すると、右側にリアルタイムでプレビューが表示。
見た目を確認しながらの編集が可能。
2. Mermaid図表サポート
```mermaid ～ ``` で囲んだコードブロックは、そのまま図表として表示。
図表も印刷時にそのまま含まれる。
3. 印刷機能
「印刷」ボタンで、プレビュー部分だけを印刷できる。
エディタやボタンは印刷対象外なので、文書だけをきれいに出力。
印刷時のカスタム項目
- ヘッダーに印刷日時を表示する／しない
- フッターに「現在ページ / 総ページ数」を自動表示
- テーブルは自動で改行され、印刷しやすいレイアウトになる
4. その他の便利機能
- ライト／ダークモード … 画面右上のボタンで切り替え。設定はローカルに保存。
- パネル幅の変更 … 左右の境界をドラッグして、エディタとプレビューの幅を調整可能。
- スクロール連動 … チェックを入れると、エディタとプレビューのスクロール位置を連動させられる。
- 行番号 … エディタに論理行ごとの行番号が表示（折り返し行は1行としてカウント）。
- 右クリックメニュー … 切り取り・コピー・貼り付けのほか、「改ページを挿入」で印刷用の改ページを入れられる。
使い方（イメージ）
- 左側のテキストエリアにMarkdownを入力する
- 右側でプレビューを確認する
- 印刷する場合は「ヘッダーに印刷時間を表示」などのオプションを必要に応じて設定
- 「印刷」ボタンからブラウザの印刷ダイアログを開き、PDF保存や紙印刷を行う
初回表示時はサンプルのMarkdownとMermaid図が入っているので、そのまま触って動作を確認可能。
まとめ
今回、シンプルなMarkdown編集＆印刷用Webアプリを作成してみた。
ドキュメントやメモをMarkdownで書き、そのまま印刷やPDF化したいときに役立つのではないかと思っています。
興味があれば、触ってみてください。感想をいただけると幸いです。
