今日は普段と少しテイストを変えて、ブログへのソースコードの表示方法について書いていきたいと思います。
ブログにソースコードを掲載する場合、ソースコードをコピーして文章として張り付けても良いのですが、それだとコードが見にくいと感じることがあると思います。
私は最近はGithubのGistを使って、ブログへのソースコードの掲載を行っています。
その際にソースコード全部を貼り付けることもありますが、ソースコードの特定の行だけを掲載したいこともあります。今回は、
- Github Gistを用いてブログでソースコードを綺麗に表示する方法
- ソースコードの特定の行だけを表示する方法
の2点を紹介したいと思います。
Github Gistを用いてブログでソースコードを綺麗に表示する方法
まずはGirhub Gistを用いてソースコード全体をブログに掲載する方法を紹介します。
(1) Githubにログインする
まず、Github Gistに投稿するためにGithubにログインしてください。Githubのアカウントを持っていない方は、新規登録を行う必要があります。
以下のページからログインします。
外部サイト：Githubログインページ
(2) New Gistを開く
ログインすると以下のようなページになりましたので、左上の「+」ボタンから「New Gist」をクリックします。
(3) 掲載したいソースコードをGistに投稿する
すると、以下のようなコードの入力画面になりますので、今回はtest.cppというC++のコードを入力することとし、Hello Worldのソースコードをコピーしてみました。
完成したら、右下の「Create public hist」をクリックします。これでコードが保存されます。
(4) コードをブログに掲載する
コードの保存が完了したら、右上にEmbedと書かれているウィンドウが出てきます。この中に入っている「<script src」から始まる部分を全てコピーします。
これをブログの記事に張り付けることで、Gistに投稿したソースコードをブログに表示させることができます。
ブログへの張り付け方ですが、一点注意点として、Wordpressを使っている場合は右上のタブから「テキスト」モードを選んで貼り付けてください。
「ビジュアル」モードに戻すと、変な再生マークのようなものが表示されているかもしれませんが、この状態でブログを確認すると、ちゃんとソースコードが埋め込まれています。
実際の結果が、以下のような感じになります。
コードをそのまま貼るよりは、ちゃんと予約語などが色分けされて表示され、行数なども表示されるため、綺麗に表示されます。
コードを全部張り付けたい場合はこれで完了なので、非常に簡単です。
特定行のソースコードの表示
特定の行のソースコードだけを表示させたり、特定の行を目立つようにハイライトしたりしたいという場合があると思います。
このときは上記のようにただ張り付けるだけでは不十分で、もう一工夫することが必要です。
ここでは「gist-embed」というライブラリを使います。
(1) gist-embedを導入する
gist-embedは以下のGithubにアップロードされており、その中の「gist-embed.min.js」というファイルに今回求める機能があります。
外部サイト：gist-embed(Github)
ただ、上記のGithubからjavascriptのファイルをダウンロードしてきた場合、webサーバにアップロードしたりするのが面倒なので、以下では別の手段で実現する方法を紹介します。
(2) ヘッダーを編集
WordPressのテーマの編集を開きます。
右側のファイル選択部分から、「header.php」を開いて編集します。
header.phpを開いたら、</head>の前あたりに以下のコードを挿入します。CDNJSと呼ばれるオープンソースソフトウェアコンテンツ配信ネットワーク上に既にgist-embedがアップロードされているので、それを読み込むコードになります。
<script type=”text/javascript” src=”//cdnjs.cloudflare.com/ajax/libs/gist-embed/2.7.1/gist-embed.min.js”></script>
以下のようなイメージです。
これでheader.phpの変更を保存してください。
これで記事の更新の際に「gist-embed.min.js」を使えるようになるはずです。
(3) 特定行のソースコードの表示
gist-embed.min.jsの設定が問題なく行われていれば、以下のコードを使用することで、コードの特定行だけを表示させることができます。
<code data-gist-id="GIST-ID" data-gist-line="行数"></code>
GISTのIDは、先ほどコードをアップしたGISTの以下のページのURLの末尾の文字列がそのままIDになります。
URLは以下だったので、IDは「3fe2b1bb38aad4ab918b7232f14b7cae」です。
例えば、先ほどのmain.cppの3-6行目だけを表示するとすれば、
<code data-gist-id="3fe2b1bb38aad4ab918b7232f14b7cae" data-gist-line="3-6"></code>
で表示を行うことができます。
結果、以下のようになります。
無事、3-6行目が表示されていることが確認できました。
まとめ
Gistにソースコードをアップし、それをブログに表示する方法について紹介しました。
gist-embedには他にも特定の行をハイライトしたり、便利に表示する機能がいくつかあるので、見やすいページを作るために是非使ってみてください。