blogにソースコードを載せる（Gist編）

前回の記事では、はてなのシンタックス・ハイライト機能を使ったソースコードを載せてみました。

次は、みんな大好きGitHubのGistを使った方法を試してみたいと思います。

1. はてなのシンタックス・ハイライト
2. Gist
3. SyntaxHighlighter

Gistとは

私も今回調べるまでその存在すら知らなかったのですが、簡単に言うと単一ファイル用のGitHubといった感じ？
以下のサイトにわかりやすくまとめられてましたので、詳細まで知りたい方はご一読ください。

www.paka3.net

ここでは、コード公開までの手順のみをまとめます。

Gistへのソース登録

注：これ以降はGitHubアカウントが登録されている事を前提で進めます。GitHubアカウントが未登録の場合はこちらから登録を行ってください。

ソース登録までの手順は至って簡単。
ブラウザでGitHubへログイン後、以下の手順で登録します。

ブログへソースを表示

以下の様なコードがコピーされています。

<script src="https://gist.github.com/akiotsutsumi/63e695e165385060c28f.js"></script>

これをブログ記事の方へそのまま貼り付ければ以下の様な感じで表示されます。

先ほどの貼り付けコード内のURLを使って、以下の様なはてな記法でも記述しても表示されます。

[https://gist.github.com/akiotsutsumi/63e695e165385060c28f.js:embed]

まとめ

• 思ってたよりはお手軽だった
  • 試す前はGitHub同様、リポジトリへのpushが必要と思ってたので
• 色分けもはてなのシンタックス・ハイライトよりは豪華？
• コード中のHTMLタグやブログからのコピペも問題なし
• 行番号もばっちり表示される
• Gist側で対象コードを修正すればブログ側へも自動的に反映
• 記事とは別にブラウザからのソース登録が若干手間・・・
  • クライアントツールが無いか要調査（Mac版 / iPad版)