DartPad を自サイトにインジェクトする方法（Astro利用時）

March 19, 2023

DartPad を Astro で生成したページに組み込む方法

DartPad Embedding Guide には、DartPad を自分のサイトに埋め込む方法が記載されています。簡単な方法は、DartPad に組み込みたいコードを Gist にアップロードし、その Gist ID を以下の HTML に指定して貼り付けることです。

<iframe src="https://dartpad.dev/embed-inline.html?id={GIST_ID}"></iframe>

しかし、複数ページに複数のコードを掲載する場合、すべてのコードを Gist で管理するのは面倒かもしれません。その場合、自分のサイトにコードを掲載して、DartPad をインジェクトする方法があります。通常は、以下のように Markdown でコードを記述するだけでできます。

<script type="text/javascript" src="https://dartpad.dev/inject_embed.dart.js" defer></script>

```run-dartpad:theme-light:mode-flutter:run-true
main() => print("Hello, World!");
```

私が Astro で試したところ、ビルドしても上手く動作しなかったため、Astro ファイルへ直接コードを記述して貼り付ける必要がありました。ただし、Embedding Guide に記載があるようにコードのサニタイズには十分に注意してください。下記が例です。

<script type="text/javascript" src="https://dartpad.dev/inject_embed.dart.js" defer></script>
<pre>
<code class="run-dartpad:theme-light:mode-inline:run-true:null_safety-true">
void main() {
  print('output message');
}
</code>
</pre>

<style>
  iframe {
    width: 500px;
    height: 500px;
  }
</style>

以上。