もう、今更？というか、言わずと知れたGitHubGistを使用して、ソースコードを公開する方法ですね。

今更感がありますが、私はシンタックスハイライトを調査していて初めてしりました。。。

いままでいろんな方のブログに、「hosted with ❤️ by github」と書いてあるソースコードを何度か見てきましたが、その時はブログを運用していたわけでもなかったせいか特に気にすることはありませんでした。

もっとはやく興味を持っていればOTL

ということで、今回はGitHubGistを利用したソースコードをブログに貼り付ける方法を書いて見ます。（需要あるよね？）

GitHubアカウントを作る

GitHubGistを利用するにはGitHubのアカウントが必要となります。

アカウントを持っていない方はGitHubのアカウントを作成しましょう。

メアドさえあればすぐにできます。

Gistにソースコードをアップする

GistにはGitHubへにリンクがヘッダー領域にあるので楽に遷移できるのですが、GitHubにはGistへのリンクがありません（2018/03/31現在）

なので、いつもYahoo!検索してます。

まぁ、URLが割とわかりやすいので覚えてしまってもいいかもです。

GistはGitHubとは違い、GitHubでいうところのRepositoryと呼ばれるプロジェクトやフォルダのような概念がありません。

Gistとは、「要点・骨子・概念」という意味らしいです。

さらさらっと書いて、軽〜く共有するようなサービスのようです。

ブログにソースコードを１、２ファイル共有するような用途に最適ですね！

Gistに遷移できたら、右上のプロフィールアイコンの横にある「New gist」をクリックします。

入力画面が現れるので以下のように入力してみます。

Gistは、同じファイル名でいくつも保存をすることが出来ますが、保存したコードの一覧を見るときに同じファイル名が並んでいると結構探しにくくなります。そこで、Gist discription..の項目にわかりやすい説明やプロジェクト名などをいれておけばのちのち探しやすくなります。

入力ができたら保存をしますが、secretとpublicの２種類がありますね。

publicは、一般公開です。他の人が自分のGistページを表示した際にリストに表示されます。

一方secretは、リストに表示されなくなります。ですが自分しか見れないということではなく、URLを知っている人や、今回のテーマであるコードをブログに埋め込んだ場合には見れるものです。

今回はsecretで保存してみます。

これでソースコードのアップロードは完了です。

ソースコードを埋め込んでみる

さっそくアップロードしたコードを、ブログ内で表示して見ましょう！

GistのEmbedの内容をコピーします。

コペーできたら、amebaowndの「html」要素を使用します。

これで完了です。

簡単ですね♪　それでは、プレビューで見て見ましょう！

どうでしょうか？このようにちゃんとシンタックスハイライトが効いているでしょうか？

シンタックスハイライトが効くかどうかはGistがどの言語に対応しているか？と、ファイル名にちゃんと拡張子を指定しているかによります。

言語は、2018/04/07現在で421もの言語に対応しているようですので、ほぼ個人制作でない限りは対応してくれそうです。（言語一覧）

上級編

これだけでも十分ありがたい機能なのですが、見慣れてくるとこうだったらいいのに、あーしたいのに・・・なんてことが出てくると思います。

そんな時はcssを上書きすることで多少カスタマイズができるようです。

1. cssカスタマイズ

gistの公式のcssです。

これを参考に、「HTML」要素の中にcssを追加してやることでカスタマイズできるようになります。

今後ブログに貼り付ける全てのgistをカスタマイズしたいのに、毎回html要素内に書き込むのは面倒だ！って場合は、AmebaOwndの管理画面の「カスタマイズ」→「CSSカスタマイズ」のPCとスマホのcssの中に書いておきましょう。

試しに、高さを調整してみます。

「html」要素にはこのように書きました。

３文字分だけ表示するという設定ですね。

おー！高さが調整されました！！

とても便利です！！

2.  gist-embed.js

さらに、gist-embed.jsというプラグインを使うことで、

• 指定行のみを表示する
• 指定行をハイライトする
  
• ファイルを指定して表示する（Add fileをして複数のファイルをアップロードしている場合）

などなど。

公式のサンプルがありますので眺めて見てください！

こちらも設定は簡単です。

公式gitのREADMEの一番上に書いてあるように、jqueryとこのgist-embed.jsファイルをgoogleapisなどのCDNから読み込めば準備完了です。

あとは、codeタグの中に表示したいgistのgist-idを指定し、カスタマイズする記述を追加すればOKです。

４行目をハイライトさせるカスタマイズをしてみます。

「html」内部にはこのように書きました（ちょっと見辛いですね；；）

そしてOKボタンを押してプレビュー画面を見てみましょう。

４行目のみ、ハイライトされましたね！！

こちらもとても便利です。

javascriptを読み込む必要があるので毎回記述しないといけませんが、高度なカスタマイズをするときは便利だと思います！

以上、今更感満載のgistを埋め込む方法でした。