記事内のコードを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タグに変換してくれるので便利ですね。

参考

• Sublime Text 2からGithub:Gistへ投稿できるプラグインの使い方 | offsidenowの日常を綴ったブログ

追記

Gist側から発行されるHTMLタグが変化したのでやめました。