外部サービスで作成したスニペットをブログ記事に埋め込む方法。

hexoに埋め込む

このブログはhexoを使って生成されている。 hexoは基本Markdownで記事を書いているために、htmlをそのまま埋め込める。 codepenやgistは埋め込み用のscriptタグを生成してくれるのでそいつを埋め込めばいい。 原理上、Markdownによる静的サイトジェネレータなら同じことができるのでは。

gist

codepen

See the Pen sticky-footer-with-flex-box by kotaro takahashi (@k4h4shi) on CodePen.

まとめ

バックエンドはgist, フロントエンドはcodepenと使い分ければ捗るのでは。