ブログ記事にソースコードを表示する方法
ソースコード表示の設定を諸々やってみたので、早速記録として残していきたいと思います。
色々なやり方があると思うのですが、今回の記事では出来るだけ簡単に導入する方法に絞って紹介したいと思います。
ソースコードをブログの入力画面にそのまま貼り付けると、当然そのコードはそのままHTMLに記述されることになります。コードがそのままの状態で貼り付けられるわけなので、そのコードは当然コードと認識されてしまいます。その結果、改行してしまったり、貼り付けたソース部分が丸々表示されずに空白になっていたりとコードが反映して意に反した振る舞いを始めてしまいます。
そういったケースを避けるためには、「これは掲載用のソースコード」ですという処理を行う必要があります。
ソースコードを表示させるために必要なことは？
- <code>要素を使ってタグではなく文字列であることを明示する
- <pre>要素をつかってソースコードを整形済みテキストとして表示させる
- 「<」や「&」などの特殊文字にエスケープ処理をする
この3つの処理を行うことで、ソースコードをコードとしてブラウザに認識させることなく、そのままテキストとしてようやく表示させることができます。通常の文章などに比べるとなかなか面倒な処理が必要になってきてしまいますね…。
<code>要素とは？
computer codeの略で、プログラムのコードであることを示す時に使用します。
HTMLは「タグ」などを使って掲載する内容がどんなものかを明示しながら作成されます。
段落であれば<p>要素、引用であれば<blockquote>要素といった用途に応じたタグを使っていくわけです。
当然コードを紹介したいのであればコードであることを明示しなければならないというわけですよね。そこで登場するのが<code>要素というわけなのです。
使用方法としては、<code>～</code>で囲んだ「〜」部分にテキストとして表示させたいコードを入れればOKです。
<code>
ここにソースコードを記述
</code><code>の詳しい情報は下記をご参照ください
code 要素 – HTML | MDN
<pre>要素とは？
Preformatted Textの略で、整形済みのテキストを表すときに使用します。
この要素内の空白文字や改行はそのまま反映されて表示されます。
使用方法は、<code>要素と同じで、<pre>～</pre>で囲んだ「〜」部分に入れればOKです。
今回のようにソースコードをそのまま表示させたいという場合は、上述の<code>と組み合わせて使用します。具体的には<code>でラップしたソースコードを入れ子にした形で記述します。
<pre>
<code>
ここにソースコードを記述
</code>
</pre><pre>の詳しい情報は下記をご参照ください
pre 要素 – HTML | MDN
特殊文字のエスケープ処理とは？
基本的には<pre>と<code>を使った処理でソースコードの表示は可能です。ただ例外なケースもあります。それは例えば下記の様な内容を表記したい場合です。
<link href="style.css" type="text/css" rel="stylesheet">上記には、「<」や「&」などテキストとして表記させるためにはエスケープ処理をしなければいけない特殊な文字が含まれています。
エスケープの処理をしないで上記の一行を表記すると、ブラウザはこれを文字列と解釈しないので仮に<pre>と<code>を使用して記述をしてもそのまま表記してくれません。なので、特殊文字が入っているコードや文章を記載するときは、それぞれの文字にあったエスケープ処理を行います。
エスケープ処理のやり方ですが、特殊文字に割り振られた文字コードを代わりに書いてあがればOKです。下記の表をご参照ください。
ちなみに「<」と入力してしまうと「<」が表記されてしまうので、<と表示させたいときは、頭に「&」を入れて「&lt;」としてあげればいけます。
| 表示 | 入力 |
|---|---|
| < | < |
| > | > |
| & | & |
エスケープの処理に関しては変換をしてくれるサイトがいくつもあるので、手動で一文字ずつ作業するよりもこのような便利サービスを利用されるほうがいいかもしれませんね。
「html エスケープ 変換」などで検索をしていただくと出てくると思います。
wordpressのビジュアルエディタで入力しているのであれば、エスケープ処理は自動で行ってくれるので何もする必要はありません。※テキストエディタの場合はエスケープ処理が必要です。
ソースコードを表示するだけでは物足りない。
技術ブログなどでみかけるエディタ風のデザインにしたいという方は次回の「code-prettify」導入編をご覧頂ければと思います。現在執筆しておりますのでもう少しだけお待ちください。
