MarpのMarkdownスライドを、LibreOffice不要で編集可能なPowerPoint（PPTX）に書き出すVSCode拡張を作りました。テキスト・画像・図形がPowerPointのネイティブなオブジェクトになります。
- F1 →
Marp: Export to Editable PPTXで動きます。ChromeかEdgeがあればOKです
https://marketplace.visualstudio.com/items?itemName=KatsuYuzu.marp-to-editable-pptx
動機
自分もMarpでほぼすべてのスライドを書いています。プレゼン本番はMarpから出したPDFや画像形式のPPTXを使っていて、それで十分です。
困るのはプレゼン後に「編集できるパワポをもらえますか」と言われるシーン。
Marpの公式PPTXエクスポートには2種類ありますが、この「後から編集したい」という用途にはどちらも合いませんでした。
| エクスポート方式 | 課題 |
|---|---|
| スクリーンショット方式 | テキストが画像になるので編集できない |
| LibreOffice方式 | 企業PCにLibreOfficeを入れられないケースが多い |
この状況にはまって、「ないなら作るか」となりました。
仕組み：ブラウザのDOMをそのまま読む
Marpの公式issueには「native editable PPTXはwontfix」とあって、視覚的な再現精度の問題から諦められていました。
MarpスライドはHTMLとしてブラウザで描画されます。そこにPuppeteer（Chromium）でアクセスして、各要素のレンダリング済みの値を getComputedStyle() と getBoundingClientRect() で読み出します。
// dom-walker.ts（ブラウザ内で実行される） const rect = element.getBoundingClientRect(); const style = window.getComputedStyle(element); // x, y, width, height, color, fontSize, fontWeight... を全部取り出す
ブラウザがすでに全部計算してくれているので、CSSを自前でパースしなくていいです。Marpのテーマが何であれ、flex/grid/カスタムCSSも透過的に動きます。取り出したデータを PptxGenJS に渡してPPTXを組み立てます。
GitHub Copilotのバイブコーディングで全部作った
このプロジェクト、手書きのコードは1行もありません。全部GitHub Copilotで作りました。
.github/instructions/ と .github/skills/ に、スライドの生成方法やテスト時のHTMLとの比較手順など書いています。参考にどうぞ。
HTMLを正本とした再現なので出来なくはないと思いましたが、当然、人間の手では不可能な作業量でした。
限界もある
フォントのズレ問題があります。ブラウザとPowerPointはテキストレンダリングエンジンが別物で、同じフォントでも文字幅の計算が微妙に違います。行の折り返し位置がずれてレイアウト全体がカスケード的にずれることがあります。
プレゼン用には向いてないですが、別のスライドに一部を取り込んだり、共有して一部使ってもらったりする用途では、十分なレベルかなと思います。
バグや要望は https://github.com/KatsuYuzu/marp-to-editable-pptx のissueへお願いします。
