記事にFlutterのコードを埋め込む方法を探したところ、
codepenというものがありました。
まずは、一番簡単な方法で埋め込む手順を試しました。
<h1 id="codepen%E3%81%A7flutter%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF">
<a class="header-anchor-link" href="#codepen%E3%81%A7flutter%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF" aria-hidden="true"></a> codepenでFlutter埋め込み</h1>
2020年10月12日時点
ブラウザはChrome確認
<h2 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h2>
<ul>
<li>
<a href="https://codepen.io/" target="_blank" rel="nofollow noopener noreferrer">CodePen: Online Code Editor and Front End Web Developer Community</a>
<ul>
<li>ユーザー登録（git hubアカウントログイン等）</li>
</ul>
</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/t8i4q338rqp5qx145r0pr8v7o602" alt loading="lazy" class="md-img">
<h2 id="%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 手順</h2>
<ul>
<li>画面左メニュー内のCREATE欄からPen &gt; Flutter Penを選択
<ul>
<li>初期dartコードの以下の状態</li>
</ul>
</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/ugjjs5vxmpvznteywhe5rzyqtkzw" alt loading="lazy" class="md-img">
<ul>
<li>上部のSaveボタンを選択
<ul>
<li>右下にシェア用のEmbedやShareボタン等が出現</li>
</ul>
</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/q5r3b7pvb3tsifdig4zhsk59bcrw" alt loading="lazy" class="md-img">
<ul>
<li>Shareボタンを選択後、「Copy Link」を選択
<ul>
<li>「<code>https://codepen.io/iwakus/pen/RwRPMXM</code>」がコピーされる</li>
</ul>
</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/q12sl3w71dt45xsrg8tyqfbgsvu5" alt loading="lazy" class="md-img">
<ul>
<li>
【備考】Zennでのcodepen埋め込み方法
<ul>
<li>
「<a href="https://zenn.dev/zenn/articles/markdown-guide" target="_blank">ZennのMarkdown記法</a>」から抜粋
<ul>
<li>CodePen</li>
</ul>
<div class="code-block-container"><pre class="language-wiki"><code class="language-wiki">@[codepen](ページのURL)
</code></pre></div>
<ul>
<li>デフォルトの表示タブは<code>ページのURL?default-tab=html,css</code>のようにクエリを指定することで変更できます。</li>
</ul>
</li>
</ul>
</li>
<li>
上記に従い、今回の埋め込みを記載（デフォルトそのまま）
<ul>
<li><code>@[codepen](https://codepen.io/iwakus/pen/RwRPMXM)</code></li>
</ul>
</li>
</ul>
<iframe src="https://codepen.io/iwakus/embed/RwRPMXM?embed-version=2" scrolling="no" frameborder="no" loading="lazy"></iframe>
以下、参考
<hr>
<ul>
<li>Embedボタンを選択</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/4r3c6b5xj5b65oitey5go08ushbq" alt loading="lazy" class="md-img">
<ul>
<li>
下部「Copy &amp; Paste Code」を確認
<ul>
<li>※通常このまま貼り付けで埋め込みとなる場合が多い</li>
</ul>
</li>
</ul>
<div class="code-block-container"><pre class="language-wiki"><code class="language-wiki">&lt;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"&gt;
 &lt;span&gt;See the Pen &lt;a href="https://codepen.io/iwakus/pen/RwRPMXM"&gt;
 RwRPMXM&lt;/a&gt; by iwakuS (&lt;a href="https://codepen.io/iwakus"&gt;@iwakus&lt;/a&gt;)
 on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async src="https://static.codepen.io/assets/embed/ei.js"&gt;&lt;/script&gt;
</code></pre></div><h2 id="%E4%B8%8D%E6%98%8E%E7%82%B9">
<a class="header-anchor-link" href="#%E4%B8%8D%E6%98%8E%E7%82%B9" aria-hidden="true"></a> 不明点</h2>
<ul>
<li>過去にDartPadで記載していたコード「<a href="https://zenn.dev/iwaku/articles/2020-10-01-iwaku" target="_blank">Flutterでチンチロリン</a>」を、そのままcodepenに貼り付けた時に、icon表示がおかしくなった
<ul>
<li>何か設定等必要なのかもしれない</li>
</ul>
</li>
</ul>
<iframe src="https://codepen.io/iwakus/embed/WNxvJwq?embed-version=2" scrolling="no" frameborder="no" loading="lazy"></iframe>

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

Discussion