Github Gistを使ってブログにソースコードをのせる
rubyのコードだと、
<pre><code></code></pre>
ではさんでおけば、よしなに表示されてくれるのだけれど
htmlだとそのままテーブルが表示されたり、何も表示されなかったりしてうまくいかなかったので、BitBucketみたいにgithubからコードを引っ張って来れないかなと考えた。
BitBucketは前試したけれどなんだかみづらかったので……。
あ、はい、ブログのスタイルをいじればいいじゃないか、という話なんですが面倒くさいです……。
それで、こういうときはGithubのGistを使うらしいので、その使い方に関してメモ。
Gistにソースコードをアップロードする
GithubのヘッダーメニューからGistをクリック。
Gistに登録したいソースコードをファイルごとにコピペしていくためのエディタが表示されます。一つのGistには一つ以上のファイルを登録することができ、一番上の欄はGistの名前を入力する欄です。Issueの名前みたいな感じ。
この画面で入力している事は全部、あとでGistを表示している画面のEditから変更することができるので気が楽です。
一つの欄に一つのファイルのコードとファイル名を入力していきます。
もっと簡単に扱うアップロードする方法もいくつかあるみたいです。
Gistup - ターミナルからGistへファイルアップロード MOONGIFT
Sublime Text 2からGithub:Gistへ投稿できるプラグインの使い方 | offsidenowの日常を綴ったブログ
で、一通り終わったら右下のCreate Secret GistないしCreate Public Gistを押します。
Create Secret Gistは検索エンジンにひっかからないけれど直接URLを入力したらひっかかる設定で、
Create Public Gistは検索エンジンにもひっかかる設定でGistを作成します。
アップロードしたGistのコードをブログに貼付ける
で、Gistを作成したら、左下のほうに
Clone this gist
Embed this gist
Link to this gist
が表示されていますが、Gistに書かれているコード全体をブログに埋め込みたい場合は
Embed this gistに入力されている内容をそのままコピーして貼付ければよいです。
はてなブログの場合
[gist:id]
と入力する、あるいは、右側のメニューのGist貼付けからも可能です。
個別のファイルを貼付けたい場合はEmbed this gistの中のスクリプトに
<script src="https://gist.github.com/user_name/id.js?file=filename"></script>
のオプションをつけて貼付けると個別のファイルだけ貼付けられます。
便利だなー。
