Qiitaで記事にCodePenのPenが埋め込めるようになったので、実際に作りつつ埋め込み方を紹介します。
CodePenのエディタの開き方
CodePenにアクセスし、ログインまたは登録後「Create」→「New Pen」を選びます。
するとエディタ画面が出ます。
HTML, CSS, JSなどを入力してSaveします。
埋め込み方
エディタ画面の右下のバーに Embed という項目があるのでクリックします。
するとモーダルが出るので、HTML形式を選択してボックス内のHTMLタグをコピーします。
コピーしたHTMLは以下のような感じになると思います。
<p data-height="265" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" data-embed-version="2" data-pen-title="dJgNLK" class="codepen">See the Pen <a href="https://codepen.io/tomoasleep/pen/dJgNLK/">dJgNLK</a> by Tomoya Chiba (<a href="https://codepen.io/tomoasleep">@tomoasleep</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
あとは、コピーした内容をQiitaのエディタに貼り付けて、投稿すると完成です。
現在のところ、エディタのプレビューには貼り付けたCodePenは表示されない仕様となっております。ご了承ください。
記事での表示
See the Pen dJgNLK by Tomoya Chiba (@tomoasleep) on CodePen.
記事内でのJSやCSSのデモなどに使ってみてください