今日は普段と少しテイストを変えて、ブログへのソースコードの表示方法について書いていきたいと思います。
ブログにソースコードを表示する場合、ソースコードをコピーしてきてそのまま張り付けてもいいんですけど、それだとコードが見にくいですよね。
最初はコピーして貼り付けも結構やっていたんですが、最近はGithubのGistを使ってソースコードの貼り付けを行っています。
その際にソースコード全部を貼り付けることもあるんですが、ソースコードのこの部分を説明したいというように、ソースコードの特定の行だけを掲載したいということもあったりして、その方法について書いていきたいと思います。
使っている環境はWordpressで、テーマはSimplicity2です。
Gistを用いたソースコードの表示
まずはGistを用いてソースコード全部を表示するところをやってみます。
(1) Githubにログインする
まず、Gistに投稿するためにGithubにログインしてください。
Githubのアカウントを持っていない方は、新規登録を行う必要がありますが、登録方法は難しいものではないため省略します。
以下のページからログインします。
外部サイト：Githubログインページ
(2) New Gistを開く
ログインすると以下のようなページになりましたので、左上の「+」ボタンから「New Gist」をクリックします。
(3) 表示させたいソースコードを入力する
すると、以下のようなコードの入力画面になりますので、今回は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サーバにアップロードしたりするのが面倒なので、今回はCDNJSに上がっているファイルをそのまま使っちゃいます。
(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には他にも特定の行をハイライトしたり、便利に表示する機能がいくつかあるので、見やすいページを作るために是非使ってみてください。