CodePenのソースコードを埋め込む

ブログ記事などでソースコードが埋め込まれているのをよく目にします。私もこのサイトにコードを保存しておきたかったので、一番最初に調べました。今回はCodePenを使用してソースコードを埋め込む方法をメモします。YouTubeの動画を埋め込むのと似た手順で、コピペで簡単に埋め込みができます。

↓こんなやつ

See the Pen ソースコードを埋め込もう！ by mumemo (@moe-ura) on CodePen.

手順

CodePenへのログインは割愛。埋め込みたいデータは作っておきます。

右下の「Embed」をクリック

埋め込みたいデータを開いたら、画面右下にある「Embed」をクリック。

埋め込み用のコードをコピー

この画面が開いたら、中央右側あたりにある「Copy Code」をクリック。埋め込み用のコードをコピーできます。

コピーしたコードをhtmlにペースト

最後はコピーしたコードをhtmlファイル、もしくはWordPressのカスタムhtmlブロックにペーストするだけで埋め込み完了。