Zenn
🦏

codepenを使って、zennにFlutter埋め込んでみた

2020/10/12に公開
Flutter
Dart
codepen
tech

記事にFlutterのコードを埋め込む方法を探したところ、

codepenというものがありました。

まずは、一番簡単な方法で埋め込む手順を試しました。

codepenでFlutter埋め込み

2020年10月12日時点

ブラウザはChrome確認

事前準備

手順

  • 画面左メニュー内のCREATE欄からPen > Flutter Penを選択
    • 初期dartコードの以下の状態

  • 上部のSaveボタンを選択
    • 右下にシェア用のEmbedやShareボタン等が出現

  • Shareボタンを選択後、「Copy Link」を選択
    • 「https://codepen.io/iwakus/pen/RwRPMXM」がコピーされる

  • 【備考】Zennでのcodepen埋め込み方法

    • 「ZennのMarkdown記法」から抜粋

      • CodePen
      @[codepen](ページのURL)
      • デフォルトの表示タブはページのURL?default-tab=html,cssのようにクエリを指定することで変更できます。

  • 上記に従い、今回の埋め込みを記載（デフォルトそのまま）

    • @[codepen](https://codepen.io/iwakus/pen/RwRPMXM)

以下、参考

  • Embedボタンを選択

  • 下部「Copy & Paste Code」を確認

    • ※通常このまま貼り付けで埋め込みとなる場合が多い
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="iwakus" data-slug-hash="RwRPMXM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwRPMXM">
  <span>See the Pen <a href="https://codepen.io/iwakus/pen/RwRPMXM">
  RwRPMXM</a> by iwakuS (<a href="https://codepen.io/iwakus">@iwakus</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

不明点

  • 過去にDartPadで記載していたコード「Flutterでチンチロリン」を、そのままcodepenに貼り付けた時に、icon表示がおかしくなった
    • 何か設定等必要なのかもしれない

Discussion