ブログにHTMLやCSSを綺麗に表示したい!【ソースコードを載せる方法】

ある程度ブログを運営していると、備忘録としてカスタマイズ方法などを記事にしたい時ってありますよね。そう思って HTML や CSS のコードを載せようとすると、表示されない場合があります。

WordPress の場合にリッチエディタのままなら影響は受けませんが、テキスト(HTML)エディタに HTML や CSS を書くと「ソースコード」だと勘違いされてしまうんですね。

そこで、テキストエディタに「ソースコード」を記述する場合には「エスケープ(意味:のがれる)」という形で表記を変更する必要があります

エスケープする必要がある文字

基本的なアルファベットはそのままなんですが、いわゆる「記号」が対象になっています。よく使われる文字は以下の通り。

表示した時入力した時
<
&lt;
>
&gt;
&
&amp;
&quot;

これらを表示させたいコードの文字と変更することで、ソースコードがちゃんと見える状態になります。

エスケープ前
<div="test">〜</div>
エスケープ後
&lt;div=&quot;test&quot;&gt;〜&lt;/div&gt;

ただ、これを自分で全部変換させるのは面倒くさいですよね。そこで、便利なツールを提供してくれているサービスを利用しちゃいましょう

ひと口メモ
逆にエスケープ文字を表示させたい時は、「&」の部分を「&amp;」に変更してあげれば表示されますよ。

エスケープを簡単にしてくれるツール

自分でちまちまと文字を変更していると間違えたりする元なので、ソースコードを丸っとエスケープ処理してくれるありがたいツールがあります。

エスケープ処理できるオンラインツールの一覧

どのオンラインツールでも同じですが、ソースコードを入力して「変換」「エスケープ」「エンコード」のボタンを押すとエスケープ処理された文字コードが表示されます。

処理された文字コードをそのまま HTML エディタに貼り付ければ、元のソースコードを入力したように表示されます。

ソースコードを表示させるための「タグ」

ソースコードを表示させるには、もう一手間必要となります。それは、ある「タグ」を2つ使うというもの。

<code>要素

<code>要素は、これはソースコードですよと認識させるための「タグ」。<code>を使って、ソースコードを表示してあげます。

<pre>要素

<pre>要素は、空白などもそのまま表示させるための「タグ」。ソースコードにある空白や改行もしっかりと反映させるには、この<pre>を使います。

この2つを使うと、以下のようになるはずです。

タグをちゃんと使用した場合
<pre>
 <code>
  ここにソースコードを記述します
 </code>
</pre>

上記のタグを使った上で、「ここにソースコードを記述します」と書いた部分にエスケープした文字コードを入れると完成です。

ソースコードを表示させるWPプラグイン

上記まではあくまでソースコードを表示させるための知識なんですけど、表示自体が味気ないんですよね。そこで、少し見やすくすることができる WordPress プラグインも存在します

プラグインの場合にはエスケープ処理をしなくてもOKな場合もあるので、処理が面倒な人はプラグインを使うのも良いでしょう。

SyntaxHighlighter Evolved

Highlighter

「SyntaxHighlighter Evolved」は、シンプルでありながらハッキリとソースコードを表示してくれるプラグイン。行番号やハイライトなどもできるので、コードを表示させるにはピッタリですね。

Highlighter

Highlighting Code Block

Highlighter

「Highlighting Code Block」は、今時なさっぱりとしたデザインでソースコードを表示してくれるプラグイン。カラフルな感じがあまり好きではない人は、このプラグインがオススメです。

Highlighter

Crayon Syntax Highlighter

Highlighter

「Crayon Syntax Highlighter」は、昔から多くの人に愛されてきたプラグイン。このプラグインについての記事がたくさん出てくるのですが、ここ3年ほど更新されていないことが気になります。

Highlighter

さいごに

サーバーやテーマによってカスタマイズが違ったりするんですよね。なので、些細なカスタマイズに関してでも情報があったら嬉しいものです。

他の人がまだ記事にしていないようなカスタマイズ方法などを見つけたら、ぜひ備忘録としてみんなで共有しましょうね。