Gistを使ってブログにソースコードを載せる

他のブログを見ていると、コードを綺麗に載せていて、あれはどうやっているんだろうと思って調べたら、Gistというサービスが簡単で良さそうなので記録しておきます。

Gistを使うとこんな感じで記述できます。

スポンサーリンク

ソースコードをキレイに載せたい

GitHubに登録

GistはGitHubのサービスなのでまずはGitHubに登録する必要があります。

https://github.com/

GitHubのサイトです。この右上の「Sign up」をクリックします。

「Sign up」をクリックしてgithubに登録

必要事項を記入して「Create an account」をクリック。

必要事項を記入して「Create an account」をクリック

コードを公開せず個人利用したい場合は月$7かかるとのこと。隠すようなものでもないので上の「Unlimited public repositories for free」を選択して「Continue」をクリック。

「Unlimited public repositories for free」にチェックして「Continue」をクリック

メールが届くので、指示に従って認証してください。

右上の「New Gist」をクリックすればコードを書き込む画面に移ります。

「New Gist」をクリック

コードを記述

コード記述画面です。

  1. 拡張子を付けてファイル名を記載
  2. コードを記述
  3. 右下の「Create gist」でコードを公開。左のボタンはURLを知らないと見られない非公開Gist、右が公開Gistです。今回は右をクリックします。

拡張子を付けてファイル名を書き、コードを記述、「Create gist」で公開

ブログへ貼り付け

これでGistが出来ました続いてブログへの貼り付けです。

  1. Embedになっていることを確認して
  2. 横のコードをコピー

Embedを選択して横のコードをコピー

WordPressをテキストエディタにしてコードを張り付けます。

コピーしたコードをテキストエディタで貼り付け

ビジュアルエディタに戻してみると、スクリプトのマークがついています。

スクリプトのマークがついている

プレビューで見るとコードが表示されています。

表示されているコードを変更したいときはGistの右上の「Edit」をクリックすれば編集画面に移ります。ここで編集すれば、ブログの方も自動的に変更されています。

「Edit」で編集もできる

Gistのメリット・デメリット

メリット

  1. なんといっても簡単なこと!プラグインを入れたりCSSをいじらなくても簡単にコードが表示できます。
  2. 自動的に色付けをしてくれます。何もしなくてもきれいにみせてくれます。

デメリット

見た目のカスタマイズは一切出来ません。Gistが自動でやってくれるにまかせます。これを気に入らない人もいるのではないでしょうか。(私は何も考えなくていいので逆にメリットだと感じます)

Gist、簡単でいいね!

手軽で何も考えなくてもきれいにコードを表示できるGist、非常に便利だと思います。スキルシミュを勉強するのにコードは欠かせないのでこれからGistの出番がどんどん増える(はず)です。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする