プログラミングを勉強していて、ブログにソースコードを紹介したいときがあります。
しかしながら、ブログなどにソースコードをそのままコピペしても、ちゃんと表示されません。
ソースコードはあくまでプログラミング言語。コンピューター側はそのまま文字列として表示してはくれないのです。
ブログやネットでソースコードを表示するにはそのままコピペするのではなく何らかの処理が必要です。
WordPressを使用している場合はプラグインを使うのが一般的ですが、
個人的にプラグインは極力使わずシンプルにWordPressを運用していきたいと思っています。
そこで今回はプラグインを使わずにソースコードをできるだけ簡単に表示する方法を考えます。
ソースコードを表示するためには、特定の記号を変換する必要があります。
例えば、文字を太くするソースコードは
<strong>太くしたい文字</strong>
と記述しますね。
この場合、「＜」を別の文字に置き換えないと<strong>は正しく表示されません。
普通に記述してはただ文字が太くなるだけです。
「＜」の場合は「<」と打ちこまないと<strong>は表示できません。
このように、ソースコードを表示するには特定の文字を別の文字に変換する必要があります。
このような作業のことをエスケープ処理と言います。
ソースコードを表示するための理屈はわかりましたが、それを手動でするとなるといささか面倒です。
変換しないといけない文字は一つではなく、何種類もあるからです。
そこで役立つのがネット上に無料であるエスケープツールです。
自分が表示したいソースコードを入力すると自動でエスケープ処理してくれるツールです。
ググればたくさんあります。例えばこれです。
↓↓
HTMLエスケープツール(Web制作小物ツール)
上記サイトにてソースコードを入力し、変換を押します。
出てきたコードをコピペすればソースコードを表示することができます。
例えば文字を太くするコードはこんな感じです。
<strong>太くしたい文字</strong>ちなみに、
<strong>太くしたい文字</strong>のように背景や枠をつけずに表示したいときはオプションのチェックを外しましょう。
あるいは変換後のソースコードから<pre>～</pre>タグと<code>～</code>タグを削除しましょう。
<pre>～</pre>タグはタグ内のテキストのスペースや改行を等幅に処理するタグ。
<code>～</code>タグはタグ内のテキストがプログラムのソースコードであることを教えるためのタグです。