[DartPad]DartPadのコードをiframeで任意のページに埋め込む方法

DartPadはただ使ってるだけでも本当に便利なんですが、自分のWebサイトなどお好きなところにコードを埋め込むことができます。

手順はこちらです。

1. Gistにサンプルコードを配置する
2. iframe用のURLを作る
3. iframeのタグを張る

今回は以下のようなサンプルコードを例に埋め込みを試してみようと思います。

void main() {
  var list = [1, 2, 3];
  print(list);
}

Gistにサンプルコードを配置する

Gist上でDartのコードを公開します。
公開設定は「Create secret gist」でも「Create public gist」どちらでも大丈夫です。

iframe用のURLを作る

Gistで発行されたURLに含まれているidをメモしてiframeのタグを作成します。

今回出来上がったGistのURLはこちらのようになりました。
URLの構成はhttps://gist.github.com/{GitHubのアカウント名}/{Gistのid}ですね。

https://gist.github.com/z-ohnami/df1d10c103743534baf1f0dc59bdda6a

iframeのタグは以下のようになります。
idのパラメーターにGistのidを指定してあげればOKです。

<iframe src="https://dartpad.dev/embed-dart.html?id=df1d10c103743534baf1f0dc59bdda6a"></iframe>

iframeのタグを張る

あとはこれをお好きなところに配置すれば完了です。
以下のようにDartPadのHTMLが埋め込まれていると思います。

あなたには先ほどのコードがDartPadを経由した形で見えているでしょうか？

*「Run」を押すと実行できます。

オフィシャルの手順はこちらです！
https://github.com/dart-lang/dart-pad/wiki/Embedding-Guide