codepenやgistで作成したスニペットをhexoに埋め込む

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

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と使い分ければ捗るのでは。