Marp Markdown スライドを LibreOffice 不要で編集可能な PPTX に書き出す VSCode 拡張を作りました #Marp #Markdown #PowerPoint #パワポ #VSCode #GitHubCopilot

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を組み立てます。