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

ある程度ブログを運営していると、備忘録としてカスタマイズ方法などを記事にしたい時ってありますよね。

そう思って HTML や CSS のコードを載せようとすると、表示されない場合があります。

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

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

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

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

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

エスケープ前

<div="test">〜</div>

エスケープ後

&lt;div=&quot;test&quot;&gt;〜&lt;/div&gt;

ただ、これを自分で全部変換させるのは面倒くさいですよね。

そこで、便利なツールを提供してくれているサービスを利用しちゃいましょう。

[box class="box26" title="ひと口メモ"]

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

[/box]

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

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

[box class="box3"]

[/box]

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

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

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

<code>要素

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

<pre>要素

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

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

タグをちゃんと使用した場合

<pre>
 <code>
  ここにソースコードを記述します
 </code>
</pre>

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

上記まではあくまでソースコードを表示させるための知識なんですけど、表示自体が味気ないんですよね。

そこで、少し見やすくすることができる WordPress プラグインも存在します。

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

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

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

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

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

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