ブログにソースコードを表示したい！プラグイン「Enlighter」がシンプルかつカンタンでおすすめ。

ブログにソースコードを載せる方法はいくつかあります。

わたしは今まで

このように背景色を変えてソースコードをそのまま載せていましたが、より「それっぽさ」を出すために、プラグインを導入しました。

プラグイン導入後の表示がこちらです👇

<div class="sample">文字</div>

うーん、なんとなくそれっぽくなりました。笑

ぶっちゃけCSSとかHTMLとかの知識は皆無なんだけど、こういうふうに記述されているだけで玄人な感じが出るよね！

行数の表示や一部の色が自動的に変わっているのは技術系ブログでよく見かけますが、やっぱり見やすいですよね。

ということで、わたしがソースコードを表示させるために利用したプラグイン「Enlighter」の使い方とかわいく表示させるためにしたカスタマイズなどをまとめてみます。

ソースコードを表示するときにはエスケープ処理が必要

まずは大事なことなのでキホンから！

ソースコードをブログで表示するときに、そのまま普通に貼り付けるとタグとして認識されるため、HTMLやCSSが反映してソースコードが表示できません。

なので一部の記号を「エスケープ処理」して表示させる必要があります。

例えば冒頭で紹介した　<div class="sample">文字</div>　のHTMLのソースコードをブログで記載する場合は、<を&lt;に、>を&gt;に変換して、

と記述する必要があるわけです。

こういった変換処理はツールを使えばワンタッチで変換できます。

冒頭の例のように、こういった変換ツールで変換した文字に背景色をつけて表示させるだけでも、こんな感じ👇

でそこそこ分かりやすくなります。

ですがソースコードを表示させる方法は他にもいろいろあり、さらにこちらのように👇

<div class="sample">文字</div>

行数を表示させたり、シンタックスハイライト（テキストの一部を分類分けして色ごとに表示する機能のこと）を利用すると、もっと分かりやすくなります。

ソースコードはpre、外部サービス、プラグインどれで表示する？

ソースコードを表示させる方法はいくつかあります。

カンタンなのは上記のように変換したタグを貼り付けたり、<pre><code>で挟むやり方です。

ただ、こちら👇

<div class="sample">文字</div>

のように、行数やシンタックスハイライトを表示させるなら、外部サービスやプラグインを利用することが多いようです。

外部サービスのGitHubやCodePenなどは生成したタグをブログにまるっと貼り付けるだけなのであまり詳しい知識がない人でもラクチン。

ただ、外部サービスでは会員登録をする必要があるのと、サービス側で何かしら変更があったときに影響を受けそう（たぶんすごく困るような影響はないと思うけど）なのでわたしは断念しました。

ということで、プラグインの中でもシンプルで分かりやすいと有名な「Enlighter」を利用してみます。

「Enlighter」はシンプルでカンタンなのに本格的に表示できる！

ソースコードをきれいに表示できると有名なプラグイン、「Enlighter」。

わたしが利用しているワードプレスのテーマ「AFFINGER5」の公式ブログやテーマ作成者のENJIさんがおすすめしていらっしゃるので、やはり使いやすいプラグインなのでしょう。

他のブロガーさんもおすすめしているとおり、Enlighterは実際に使ってみるととってもシンプルで分かりやすく、かつ軽めなのでその評判の良さも納得ですよ。

Enlighterの使い方

step
1プラグインをワードプレスにインストール＆有効化

まずは「Enlighter」をワードプレスにインストールして有効化します。

step
2投稿ページのボタンをクリック

ビジュアルエディタにあるEnlighterのボタンをクリックします。

step
3本文にタグをそのまま入力

本文にタグをそのまま入力します。エスケープ処理はしていない状態で構いません。

言語やModeなどはデフォルトの設定のままで大丈夫です。

タグを入力したら「OK」ボタンをクリックします。

step
4タグが生成される

エスケープ処理された状態でタグが自動生成されます。

これをブログに貼り付けるだけで、行数やシンタックスハイライトが反映されたソースコードを表示できます。

<div class="sample">文字</div>

貼り付けるだけでできるなんてお手軽すぎる！

EnlighterをCSSでカスタマイズしてソースコードをかわいく表示してみた

なんとなく他の背景と合わせたかったので、CSSで背景色などを変更してみました。

!importantを多用していてあまりよろしくないCSSなので、何か不都合があったらまるっと削除するつもりです(´・ω・`)

.odd,.even{
  background-color: #e8f2fc!important; /*ソースコード欄の背景色*/
  border: none!important; /*ソースコード欄の枠を削除*/
}

.EnlighterJS{
  background-color: #c2d9ef!important; /*行の背景色*/
  border: none!important; /*ソースコード全体の外枠を削除*/
}

通常は1行ごとに色が変わりますが、全体の色を同じにしています。

もし1行ごとに色を変えたければ、.oddと.evenでそれぞれ異なる色を指定してあげてください。

まとめ：Enlighterはお手軽なのに本格的にソースコードが表示できる！

ブログをしていると備忘録としてソースコードを載せたいことがありますよね。

ツールでエスケープ処理をしてペタッと貼り付けるだけでもよいのですが、Enlighterであればプラグインひとつでカンタンに本格的なソースコードの表示ができます。

あまり知識がなくても利用できるプラグインなので、ぜひ利用してみてくださいね。

ソースコードがかわいく表示できて大満足です！💕