Qiita内にcodepenを埋め込む方法

codepenとは？

1. コードの実行とプレビュー： CodePenを使用すると、HTML、CSS、JavaScriptを含むコードをリアルタイムで編集し、ブラウザ上で即座にプレビューすることができます。
2. プロジェクトの共有とコラボレーション： 自分の作品やプロジェクトをCodePen上で公開し、他のユーザーと共有することができます。また、他のユーザーの作品に対してコメントやフィードバックを提供したり、コラボレーションしたりすることも可能です.
3. コミュニティと学習： CodePen には、世界中の開発者が集まるコミュニティがあります。他の人のペンを見て学ぶことができますし、自分の知識を共有することもできます。
4. 他サイトでの埋め込み： ソースコードや結果表示を他のサイト(Qiita)に埋め込むことができます．

埋め込み方法

埋め込んでみるとこんな感じ⇓⇓

方法1：URLのゴリ押し

必要なのはpenを開いた時のURLの最後の部分
https://codepen.io/ユーザー名/pen/「ここが必要」/

それをコピーして以下のコードのdata-slug-hash=" ココにぶち込め "

<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="表示したいpenのURL"</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

出来たらこれをマークアップ内に貼るだけで完成

方法2：本来の正規ルート

私は，なぜか Embed というボタンが表示されなかったので1の方法をとった．
理由が分かる優しい方いらっしゃれば教えてください．

その他

基本的な使い方を知りたい方は以下を参照ください

codepenのページです