Gistをっかってみょーと思ぃましたが、
このブログのジェネレータCabinJSにゎ、
Gistを貼るための特別なプラグインなどゎ特にぁりません
なので、ふつうに<script>タグとかで貼ることになるんですけど、
Gist公式の<script>タグょりもぃーかんじのライブラリをみっけました
それが、gist-embed.jsです
gist-embed.jsのすごぃとこ
非同期でGistのjsonを取得してくれる
Gistゎ公式に<script>タグを提供してくれてますが、
そのjsファイルがdocument.write()で強引にかきこむ仕様で、
だぃぶ、ぅざぃんですけど、
Gistゎなにげに、jsファイルだけでなく、jsonも提供してぃて、
gist-embed.jsゎ、非同期でそのjsonを取得してくれます
なので、ページのロードのブロッキングが発生しません
Gistのcssをカスタムしゃすぃ
これちょっと文章で説明するとゃゃこしくなるんですけど、
Gist公式の<script>タグゎ、問答無用に、
その<script>の位置にlink要素でcssを挿入してくるんですけど、
gist-embed.jsゎ、Gistのデフォルトのcssのlink要素を、
ドキュメントのhead要素の最初の子要素として挿入してくれます
これのなにがぃけてるかってゅーと、
コードカラーリングなどのスタイルをカスタムしたぃ場合に、
ふつーにhead要素内にカスタム用cssのlink要素を入れてても、
カスタム用cssのほうの優先度が高くなり、
ゃたらと!importantかきまくったりする必要もほぼなぃです
ぁゃぴゎ、ふだんからエディタをmonokaiカラーにしてるので、
Gistもmonokaiになるょーにcssをぁててみました
表示するコードの行の範囲を柔軟に指定できる
ただファイルのコードぜんぶを一気にみせるんじゃなく、
数行だけを抜き出して表示するとかができますので、
解説とかを、てぃねぃにゎかりゃすくかけます
下にかく、動作サンプルをみてくださぃ
行番号、メタ情報(フッター)の表示・非表示も選択できる
これも、以下にかく動作サンプルをみてくださぃ
動作サンプル
以下ゎ、gist-embed公式exampleを、ただかき写しただけです
デフォ
行番号なし
行番号とフッターなし
複数のファイルがぁるGist
複数のファイルがぁるGistでそのぅちのひとっのファイルだけ表示
行番号を1行だけ指定
行番号を範囲で指定
行番号を1行だけ指定と範囲指定の両方
行番号を1行ずっ複数指定
まとめ
Gist側の仕様変更などにゎ気をっけなきゃぃけなぃと思ぃますが
機能的にゎとてもぃぃので、
ブログでGistを貼るならっかってみる価値ぁると思ぃます
