【Flutter】DartPadのコードをブログに埋め込む方法

所有時間1分

今回はDartPadで作ったソースコードをブログに埋め込む方法について紹介します。

こんな感じでコードを埋め込むことができます。

目次

準備(GitHubに登録)

Gist ID

DartPadをブログに埋め込むためには、Githubアカウントが必要なのでまだ持っていない方は先にアカウントを作っておきましょう。

既にアカウントを持っている方は、GistでDartPadで表示させたいコードを書いてGist IDをコピーして置きます。Gist IDは埋め込む際に必要となります。(URL最後の「/」の後の文字列がGIST ID)

DartPadの「埋め込みスタイル」は4つ

embed-dart.html(Dartコード+コンソール左側)

<iframe src=”https://dartpad.dev/embed-dart.html?id=GIST ID” width=””100%” height=”350″></iframe>

Dartコードとコンソール(左側)だけを表示させたい場合は上記のコードをブログのHTML(カスタムHTML)に埋め込みます。

DartPadの横幅・高さを調整したい場合はそれぞれ「width」と「height」で調整します。(以下同様)

embed-inline.html(Dartコード+コンソール下側)

<iframe src=”https://dartpad.dev/embed-inline.html?id=GIST ID” width=””100%” height=”350″></iframe>

Dartコードとコンソール(下側)だけを表示させたい場合は上記のコードをブログのHTML(カスタムHTML)に埋め込みます。

embed-flutter.html(Flutterコード+コンソール+HTML出力)

<iframe src=”https://dartpad.dev/embed-flutter.html?id=GIST ID” width=””100%” height=”350″></iframe>

Flutterコード、コンソール、アプリを表示させたい場合は上記のコードをブログのHTML(カスタムHTML)に埋め込みます。

embed-html.html(HTMLとCSSで装飾したい場合)

<iframe src=”https://dartpad.dev/embed-html.html?id=GIST ID” width=””100%” height=”350″></iframe>

HTMLとCSSで装飾したい場合は上記のコードをブログのHTML(カスタムHTML)に埋め込みます。

以上です。

URLをコピーする
URLをコピーしました!
目次
閉じる