@love-rox/ptpt-astro

ピア依存は astro >= 4 と @love-rox/ptpt-core です。@love-rox/ptpt-rehype は依存として自動的に引き込まれます。

astro.config.mjs にインテグレーションを追加します。これだけで印付きの Markdown / MDX 本文が動き、スタイルシートと hydrator も注入されます。

// astro.config.mjs
import { defineConfig } from "astro/config";
import ptpt from "@love-rox/ptpt-astro";

export default defineConfig({
  integrations: [ptpt()],
});

// astro.config.mjs
import { defineConfig } from "astro/config";
import ptpt from "@love-rox/ptpt-astro";

export default defineConfig({
  integrations: [
    ptpt({
      // forward rehype options (e.g. a default preset name)
      markdown: { defaultPreset: "alphanumeric" },
      styles: true,
      hydrate: true,
    }),
  ],
});

---
import Patapata from "@love-rox/ptpt-astro/Patapata.astro";
import PatapataBoard from "@love-rox/ptpt-astro/PatapataBoard.astro";
---

<!-- preset is a built-in preset NAME, resolved by the hydrator -->
<Patapata target="TOKYO" preset="alphanumeric" />

<PatapataBoard targets={`TOKYO\nOSAKA`} preset="alphanumeric" />

共通セルオプション（data-ptpt-* で渡されます）は React / Vue / rehype と同じ意味で動きます。インテグレーション自体には3つのトグルがあります。

• ▸Astro は SSG-first なので、プラグインは build 時に走ります。クライアント側のコストは、静的マークアップを動かす小さな hydrator だけです。
• ▸JS がなくても盤面はプレーンで読めるテキストとして表示され、hydration はフリップを足すだけです。
• ▸markdown: false で Markdown パイプラインをオフにできます（コンポーネントだけ使う場合など）。styles: false / hydrate: false で各注入をスキップできます。
• ▸コンポーネントと Markdown プラグインは同じ data-ptpt-* 出力を共有するので、.astro 直書きと Markdown 本文で挙動が揃います。

Astro を使っていない場合は、生の rehype プラグイン を unified パイプラインに直接組み込んでください。アプリ側でランタイムに制御したいなら React / Vue コンポーネントがあります。