自習室

こもります

はてなブログに良い感じにGistを埋め込む

TIPS

やりたいこと

はてブロで自分の書いたコードを紹介しながら記事を書くときに、Markdown形式の場合、コードをコピーしてきては ``` タグで囲んで記事に埋め込むことで

// コードを書く
class Sample
{
    static void Main()
    {
        Console.WriteLine( "Hello World" );
// 略

と表示するのが標準ですが、300行とかあるコードを全部貼るのは間抜けだし読みづらくなるだけ。かといって修正が何カ所にもわたるものを、修正箇所ごとに細切れにコピーしては貼って～とやると、そのコードを再利用する人(もし居たら光栄)にとっては不便。

そう言えば、ウェブアプリの設定ファイル一個とか、.zshrc一個とかだけを公開するのに、Gistって素敵なサービスがあったなぁ、ここと連携すると良い感じかもしれない、と思い当たりました。

はてなブログには標準でGist連携がありますが、これを使うと、あるGistリポジトリの全ファイルのコード全文を一斉に貼ることしか出来ないので不便です。コードとしてはまるっとGistに上がっているけど、果てブロにはその一部が表示される、ような使い方がしたいです。

gist-embeded

blairvanderhoof/gist-embed · GitHub

こちらで、私の希望をほぼ満たしたJavaScriptを公開してくださっていました。出来ることの一覧も読みやすくまとめられています

gist-embed

  • gistの読み込み、表示
  • 行番号の表示非表示、フッタの非表示
  • 表示するファイルの選択 (はてなブログの標準Gist連携だと、全ファイル・全文が一気に表示される)
  • コードの一部行を選んで表示

などが可能です。完璧です。

使用例

前記事

Redmine(ver.2.4.2, Rails ver3.2.16) のガントチャートに日付を表示する - 自習室

では、自分のコードを一部選択コピーしては```タグで囲みながら貼り付ける、としていましたが、gist-embededを用いることで以下の様な表示が可能になります。

ここでは、

  • 指定Gist内の複数あるファイルのうち、1つを選択
  • そのファイル内の、指定行を選択

して、表示しています。また、フッタ内のリンクから、Gistに飛んでコード全部を読むことが出来ます。完璧です。

デメリット

@hecomiさん に指摘されたのですが、この手法だと、ページの表示時にJavascriptを実行してGistからコードを取ってきて表示する為、ページのソース中にコードが埋め込まれないことになり、結果として記事を「コードで」検索することが出来なくなります。これは大きなデメリットでもあるので、気になる方は別の手法を検討された方が良いかもしれません。

手順

デザインテンプレートの改変

f:id:AMANE:20140128100226p:plain

の、「HTMLを記述できます」のとこに、以下のコードを書き込みます

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gist-embed/1.6/gist-embed.min.js"></script>

記事中に<script>タグでgistを埋め込み

gist-embed に習って希望のオプションを足します。上の私の使用例の場合は、

<script data-gist-id="8660002" data-gist-file="show.html.erb" data-gist-line="97-108"></script>

です。本家では<code>タグで埋め込んでいますが私は<script>を使っています。テンプレートごとに見えも変わると思うので、ご自身のCSSと相談してください。