ブログ

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

更新日:

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

わたしは今まで

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

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

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

プラグイン導入後

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

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

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

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

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

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

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

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

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

エスケープ処理が必要な記号の例

  • <→&lt;
  • >→&gt;
  • [→&#091;
  • ]→&#093;
  • &→&amp;

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

&lt;div class="sample"&gt;文字&lt;/div&gt;

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

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

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

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

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

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

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

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

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

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

ソースコードを表示させる方法の例

  • <pre><code>で挟む
  • 外部サービス(GitHubCodePenなど)でタグを生成して埋め込む
  • プラグイン(SyntaxHighlighter Evolved、Enlighterなど)を利用する

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

ただ、こちら👇

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

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

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

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

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

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

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

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

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

Enlighterの使い方

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

プラグイン「Enlighter」はこれです!

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

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

【ブログ】プラグイン「Enlighter」の使い方1-ビジュアルエディタのボタンをクリック-min

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

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

タグを入力して「OK」ボタンをクリック-min

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

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

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

step
4
タグが生成される

タグが自動で生成される

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

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

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

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

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

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

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

CSS

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

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

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

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

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

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

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

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

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

Sponsored Link

 おすすめ 

貯金

貯金へ

節約

節約へ

家計簿

家計簿へ

ブログ

ブログへ

公的制度

公的制度へ

TOP

TOPへ

-ブログ

Copyright© OLあさとさんの節約帳 , 2019 All Rights Reserved Powered by AFFINGER5.