今更聞けないソースコードをブログに表示させる方法

2018/8/22

プログラムやwebデザインを学ぼうとすると技術ブログを読む事が増えますが、その時に、コードがブログ内に書かれています。僕自身あまりコードを貼る事がなかったので、どうやっているのか気になり実装してみました。今更恥ずかしくて聞けないという人は、以下のプロセスを実行するとコードをブログ内にいい感じに表示させてくれるので参考にしてみてください。

まずは、ソースコードとして表示させる

まずは、pre要素を使ってコードとして表示させます。通常は、brを使って文章を改行しますが、preを使う事で、自動的にソースコードを改行して表示してくれます。

<pre><code>
<!-- ここにソースコードを貼り付ける -->
</code><pre>

ソースコードに色をつける

このブログは、僕が普段使用しているSublimeTextで使われいてる色味に調整しています。また、この色味をつけて読みやすくすることをシンタックスハイライトと呼びます。シンタックスハイライトの設定で個人的におすすめなのが、「highlight.js」です。

CDN版で実装するのが簡単

読み込みは、ファイルごとダウンロードして利用するか、CDN版を使うかの2択です。CDN版の方が軽くなり、便利なので僕はCDN版を利用させてもらっています。ちなみにCDNは（Content Delivery Network）の略です。CDN版は、以下の3行をheader.phpなどに記述すれば完了です。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

おそらく、これだとデフォルト設定のままで、表示がグレー背景になったかと思います。ここからシンタックスハイライトのテーマを変更します。

ハイライトカラーの設定

設定も簡単で、読み込みcssファイルを変更するだけで、適応してくれます。ハイライトカラーのライブラリーは以下です。

highlight.demoページ

気に入ったテーマを選択してcssファイルを変更します。テーマが大文字の場合は、小文字に変更します。具体的なcssファイルの書き方は、

「小文字表記に変更」 + 「-」(ハイフン) + min.css

でテーマが適応されます。ちなみに、僕はMonokaiを利用しているので、CSSの表記はmonokai-sublime.min.cssとなります。上記の「+」や「-」の「」（カッコ）は説明のために記入しているだけですので、記入しないようにしてください。 cssファイルは、CDN版でheader.phpなどに入力したソースを変更します。こんな感じです。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/monokai-sublime.min.css">

しっかりとコードが表示されるようにエスケープ処理は忘れずに！

どのブログでも記載されいていますが、コードをそのまま指定箇所に記述しても、「あれ！?表示されてないじゃん」となります。なので、ここは文字列ですよ！と教えるエスケープ処理が必要となります。<や>を実体参照というモノに置き換えると正常にコードが反映されます。便利なツールがあるので、こちらを利用して変換すると便利です。また僕がこの実装を行う際に参考にしたブログ内にも、よく使われる実体参照がありますので参考にしてみてください。

数値実体参照変換

自分の好みに合わせてCSSを調整

以上の内容で、好みのシンタックスハイライトは適応できたかと思います。僕は個人的に、テキスト内に出てくる要素も分かり易くしたかったのと、細かな余白や角丸の処理をしたかったので、codeタグにclass="code"を指定し、以下のcssを適用させています。別に、不要だと思えばここは設定しなくても大丈夫です。

code {
    padding: 2px 10px 3px;
    line-height: 28px;
    border-radius: 4px;
    word-break: break-all;
    background-color: #363f48;
    color: #fff;
}
.code{
    padding: 10px 20px;
}

コードを表示させる別の方法

今回は、「highlight.js」で実装を行いましたが、gistと呼ばれる方法や、wordpressのプラグインでも実装可能です。どれがいいという事はないと思います。今回ソースコードをブログに読み込むの参考にしたいくつかの記事を添付しておりますので、自分の目的とやりやすいもので実装してみてください。
ちなみに「Gist（https://gist.github.com/）」とは、GitHubの提供している断片コードの共有サービスのことです。