【Dart/Gist】DartPadをブログに埋め込む方法

最終更新日

この記事では、ブログサイトでよく見かけるDartPadをブログへ埋め込み方法をまとめました。

Dartpatを利用すればブログなどで訪問したユーザーがDartのコードをその場で実行できるため非常に分かりやすくなると共に見やすくなるため便利です。

Gistを使う

Gistを使うにはGithubへの登録が必要です。

方法

  1. Gistにコードを保存
  2. <iframe src=”https://dartpad.dev/embed-dart.html?id=Gist_ID” width=”100%” height=”400″></iframe>のGist_idに保存したコードのIDを入力
  3. こちらのようになります。完成。

Dart padの種類

Dart padの種類には以下のようなものがあり、それぞれURLを変えることで使用可能になります。

(末尾にGistidは必要です。)

埋め込むDartPadiframeタグ
Dart and console<iframe src=”https://dartpad.dev/embed-dart.html?id=Gist_ID”></iframe>
Flutter, console, and HTML<iframe src=”https://dartpad.dev/embed-flutter.html?id=Gist_ID”></iframe>
Dart, console, and HTML<iframe src=”https://dartpad.dev/embed-html.html?id=Gist_ID”></iframe>

fem