記事中にソースコードを掲載したい場合はpre要素とcode要素を使おう

 このブログのようにHTMLやPHPに関する記事を書いていると、記事中にコードを載せたい場合があると思います。

 Wordpressではコードを綺麗に掲載するためのプラグインなども出ていますが、今回は手軽にソースを表示できる「pre要素」と「code要素」を紹介していきます。

 

Pre要素とは

 pre要素とは、Preformatted Text(整形済みテキスト)のことで、<pre></pre>に囲まれたテキストが既に整えられたものであることを示すために使います。

 つまりスペースやタブなど、記述したとおりに表示したい場合に使用します。

Code要素とは

 <code></code>で囲まれたソースコードは、本来であればプログラムとして認識されてしまう言語がソースコードそのままの姿で表示されます。

PreタグとCodeタグの使い方

 preタグとcodeタグの使い方は出力したいソースコードを、

<pre><code>◯◯◯</code></pre>

 で挟めばOKです。

 例えば、

<?php 
  print('こんな感じでつかいます♪');
?>

 というようなコード例を作りたければ、

<pre>
  <code>
    <?php
      print('こんな感じでつかいます♪');
    ?>
  </code>
</pre>

 のように記述します。

まとめ

 WEB技術系の記事ではソースコードを載せる機会が多いので便利な機能ですね。

 以前wordpress用のプラグインで表示しようとしたのですが、プラグインを使用するとサイトが重くなるのと、結局ショートコードなどで囲まなければいけないのでしばらくこの方法で掲載していきたいと思います^-^ノ

フォローする