Qiita
codepen

Qiitaで記事にCodePenが埋め込めるようになりました

Qiitaで記事にCodePenのPenが埋め込めるようになったので、実際に作りつつ埋め込み方を紹介します。

CodePenのエディタの開き方

CodePenにアクセスし、ログインまたは登録後「Create」→「New Pen」を選びます。

スクリーンショット 2018-01-17 14.27.10.png

するとエディタ画面が出ます。

スクリーンショット 2018-01-17 14.26.16.png

HTML, CSS, JSなどを入力してSaveします。

埋め込み方

エディタ画面の右下のバーに Embed という項目があるのでクリックします。

スクリーンショット 2018-01-17 14.12.10.png

するとモーダルが出るので、HTML形式を選択してボックス内のHTMLタグをコピーします。

スクリーンショット 2018-01-17 14.14.31.png

コピーした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のデモなどに使ってみてください:tea: