サイトにプログラミングコードを貼り付ける

Gist, CodePen, jsFiddleなどの外部のサービスを使って、自作のプログラミングコードをサイトに掲載することもできます。

HTMLブロックを使ったコードの埋め込み方法について紹介いたします。

CodePen

貼り付けたコードは、このようにCodePen上で実行させることができますので、ぜひ自慢のコードを掲載してみてください。

（※ 掲載したPenはこちらのものをお借りしました。）

CodePenの埋め込み方

作成したPenの右下にある「Export」→「Embed Pen」をクリックすると、埋め込みコードを取得できます。

iframe形式でもHTML形式でも埋め込み可能です。

エディタ上で「HTML」ブロックを選択し、コピーした埋め込みコードを黒いダイアログ上に貼り付けて「OK」で埋め込み完了です。

jsFiddle

jsFiddleで保存したものは、ヘッダー上の「Embed」から埋め込みコードを取得できます。

こちらも同様に、エディタ上のHTMLブロック挿入ダイアログに貼り付けて保存します。

Gist

作成したGistの右上にある「Embed」部分のscriptタグをコピーして、同様に埋め込みます。