記事内のコードをGistにしようと思ってSublime TextにGistプラグインを入れてみた
記事内に表示するコードを今まではGoogle Code Prettifyを使っていたのですが、サーバのリソースを少しでも減らそうと思い、Gistを利用してコードを表示する方法に変えてみることにしました。
加えてGistサイト内でも追加は出来るのですが、Sublime Textにもプラグインがある様なので、せっかくなので使ってみることにしました。
Sublime Text Gistプラグイン
まずはPackage Controlをインストールしておきます。インストール方法はコチラが参考になると思います。
Package Controlがインストールできたら、Gistプラグインを探します。他のプラグインと同様に、「Cmd+Shift+P（Winの場合はCtrl+Shift+P）」で開き、「Gist」と入力すると見つかると思いますのでインストールします。
インストール後に設定ファイルを編集します。設定ファイルは、「Preferences -> Package Settings -> Gist -> Settings User」をクリックすると編集できます。
入力する内容は下記のような感じ。（ついでにGist埋め込みの実験）
{
"token": "**********"
}
tokenの発行については、GitHubにログイン後、「Account Settings -> Applications」のページ内の、「Personal Access Tokens」がそれにあたります。
「Create new token」をクリックして、自分が分かるように適当な名前を付けて作成すると、登録時のみ表示されます。ページ遷移すると表示されなくなりますので注意。
設定完了後にSublimeText上からGistにアクセス出来るようになります。Package Controlから「Gist」と入力すると、メニューが並ぶはずです。
WordPressにGistのコードを貼る
Gistのコードを貼る場合、発行されているScriptタグを貼ればOKなのですが、WordPressの記事内ではショートコードを利用する方法もあります。
今回は「Embed GitHub Gist」のプラグインを利用させていただきました。
このプラグインを利用した場合、下記のような記述が可能となります。
// ID指定
[gist id=8877382]
// URL指定
[gist]http://gist.github.com/8877382[/gist]
自動的にScriptタグに変換してくれるので便利ですね。
参考
追記
Gist側から発行されるHTMLタグが変化したのでやめました。