ブログにコードを貼り付けてみよう－gist
この記事では、ブログを書いている人へ向けて、ブログにソースコードを貼り付ける方法を紹介します。
自分が使っている「GitHub」の「Gist」サービスを紹介したいと思います。
HTMLにはソースコードの表示などに使う<pre>タグが標準でありますが、シンプルすぎて分に紛れがちになることもあります。
以下に<pre>タグを用いたサンプルコードとGistの見た目を載せます。
<p>サンプルコードです</p>
2つを比べてみるとgistの方が一目でわかります。
他にもgistの利点はあります。
- 自作のコードをgistサービスのところに貼り付けるだけで上記のように表示してくれるコードを出してくれる
- インデントを自動で下げてくれる
- 記述している言語を認識すると自動で色を付けてくれる
以上のことをやってくれるのでおすすめです。
それでは使い方を説明します。
今回はGitHubのアカウントを持っていない人向けに解説します。
まずGitHubの公式サイト（https://gist.github.com/）にアクセスします。
右上の「sign in」ボタンをクリックして「Create an account. 」ボタンを押してアカウント新規作成画面に映ります。
「ユーザー名」と「メールアドレス」、「パスワード」を入力して「Create an account 」ボタンを押してアカウント作成完了です。
GitHubのトップページの右上のプラスマークの「new gist」から Gist トップページに移動します。
そして上の欄（1）にコードの説明文を、次の欄（2）にファイル名を拡張子付きで入力し、大きな入力欄（3）にコードを貼り付けます。
そして「Create public gist」を押して公開用のコードを作成します。
すると以下のような画面になります。
「Embed」と書かれた所に埋め込み用のコードが表示されるのでコピーします。
WordPressのビジュアルエディタではカスタムHTML内に、テキストエディタではそのままコードを貼り付けて使用します。
gistのサイトに自分の作ったコードは保存されるので、いつでも編集できます。
英語のサイトにアカウントを作るという、最初のハードルさえ超えてしまえばあとは簡単なのでこの方法をお勧めします。
