Marpライブビューアーを作りました

2026年8月3日 2026年8月3日

にーさん

Marpは便利。AIと組み合わせるともっと便利

プレゼン資料をMarkdownで書けるMarpをここ数年愛用しています。

VS Codeの拡張を入れれば、書きながら右側でプレビューできる。テキストで書けるので差分も追いやすい。それだけでも十分便利なのですが、いちばんありがたいのはAIとの相性の良さです。

プロット（あらすじ）さえ考えておけば、あとは「これをMarpの形式で出して」とAIに頼むだけ。それっぽいプレゼン資料が一気に出来上がります。見た目を整える作業が消えるので、そのぶん中身を考える時間に回せます。

不満がないわけではありません。画像はMarkdownとは別ファイルで持つことになるので、資料を人に渡すときや移動させるときに、その管理がちょっと面倒。ここはPowerPointの「1ファイルで全部入り」に負けているところですね。

これまでは公開されているテーマをそのまま使っていたのですが、「自社用の専用テーマがあるといいな」と思い立ちまして。これもAIにお願いしたら、コーポレートカラーをベースに、ロゴ入りのテーマをあっさり作ってくれました。めっちゃ重宝します。

ただ、カスタムCSSを毎回Marpファイルにべた書きするのは面倒だし、変更に弱いです。かといってファイルで外だしにすると、今度は他人とシェアするのが大変。

そこで思いついたのが、git hub pagesで公開してしまうことでした。契約しているレンタルサーバーではなく、GitHub Pagesを利用します。これなら、cssをgit 管理できる利点もついてきます。urlに自社ドメインを入れる必要もないので、これで十分です。

昨年から使い始めたMarpが、カスタムCSSのおかげでさらに手放せなくなった、というのがここまでの話です。

頻繁に使っているとやっぱり不満も出てきます。私の場合はプレビューでした。

VS Codeのライブプレビューは便利なのですが、実際にプレゼンするときには使えません。画面を最大化するのが難しいんですね。

なので、PDFに書き出してプレゼンに使っていました。これがまた、いちいちエクスポートするのが地味に面倒。しかもプレゼン中に誤字に気づいて、その場で直したいと思ってもできない。この瞬間がいちばんストレスでした。こういうところは、PowerPointやGammaに分がありますね。

Marp CLI（コマンドラインツール）には-pというライブプレビュー機能があって、これを使えば解決しそうなのですが、カスタムCSSを当てるには--themeにCSSのパスを毎回渡さないといけない。しかもGitHub Pagesで公開しているURLは、そのまま引数で渡せません。

やっていることはシンプルで、Marp CLIにカスタムCSSをパラメータで渡すだけのツールです。

これだけでプレビューウィンドウが開きます。あとはエディタでMarkdownを編集して保存するたびに、プレビューが自動で更新される。書き出し作業はもう要りません。

投影中もプレビューウィンドウを出しっぱなしにしておけるので、誤字を見つけたらエディタで直して保存 → その場で反映。PDFを作り直す必要がありません。当初のいちばんの不満が、これで消えました。

カスタムCSSはURLでもローカルファイルでも登録でき、URLのほうは実行のたびに取得し直します。GitHub Pages側を更新すれば、次に実行したときから反映される、というわけです。取得に失敗したときは前回の内容を使うので、オフラインでも動きます。

日常的にMarpでプレゼンする人は、よかったら使ってみてください。

Windows専用です。macOSやLinuxは対象外なので、そこはご容赦を。

インストーラはありません。ダウンロードして置くだけです。

marp-viewerのようなフォルダをひとつ作っておくと分かりやすいです。

C:\MarpLiveView\
├─ MarpLiveView.exe
└─ marp.exe

あとはMarpLiveView.exeをダブルクリックするだけ。

署名を付けていないので、初回に「WindowsによってPCが保護されました」と表示されることがあります。「詳細情報」→「実行」で起動できます。気になる方はソースを公開しているので、確認したうえで自分でビルドしてください。

詳しい設定や、カスタムCSSの登録方法はGitHubのREADMEに書いてあります。

GitHubリポジトリ: https://github.com/23style/marpLiveView

MITライセンスなので、自由に使ってもらって構いません。