ページ

2013-06-12

ブラウザにソースコードをそのまま表示する基本的な方法

Bloggerでブログを書いているわけですが、ソースコードをそのまま表示する際などはHTMLに直書きした方が思いどうりに出来ていいですよね。その際の基本的な方法の覚書メモです。ソースコードをハイライト表示できるライブラリとして「SyntaxHighlighter」や「google-code-prettify」などがあります。見栄えを考えるとこういったツールを使った方がいいですね。でも、今回は基本中の基本としてソースコードをそのままブラウザに表示する方法についてまとめました。


  1. エスケープ・エンコードしてWEB用に置換変換
  2. HTMLでは「<」や「>」などはタグの記号なので、文字として表示する場合にはそのままでは表示されません。「<」や「>」をはじめとしてHTMLの特殊文字を表示させるためには、「&lt」は「&lt」、「&gt」は「&gt」と書き換えてタグを無効化(エスケープ)する必要があります。HTMLではこのように直接記述できない文字や記号(マークアップで使われる、半角の「<」や「>」など)を表記する際に用いられるひとつの手法を「文字実体参照」と言います。ちなみに使用頻度の高いHTMLの特殊文字一覧も下記に載せておきました。

      【ブラウザ上の表示】
      <font color="dimgray"><b>1.エスケープ・エンコードしてWEB用に置換変換</b></font>
      【HTML記述文字コード】
      &lt;font color=&quot;dimgray&quot;&gt;&lt;b&gt;1.エスケープ・エンコードしてWEB用に置換変換&lt;/b&gt;&lt;/font&gt;
      
      HTML-特殊文字でよく使用される文字実体参照
      No. 実体参照 特殊文字 コメント
      01 &amp; & アンパサンド
      02 &lt; < 小なり
      03 &gt; > 大なり
      04 &nbsp; 空白
      05 &quot; " クォーテーション
      06 &apos; ' アポストロフィー
      07 &copy; © コピーライト

  3. <PRE>…ソースを整形済みテキスト表示
  4. <PRE>~</PRE>で囲んだ範囲のソースをそのまま表示します。ただ、記述されているコードのタグやスペース・改行などの特殊文字はHTMLの文字実体参照変換する必要があります。HTMLの初期の仕様では<XMP>タグで囲むことによってその範囲内のソースコードはHTMLタグを無視した状態でそのまま表示してくれて便利なのですが、HTML4.0ではソースコードを表示する際はこの<PRE>を使用することが推奨されています。なお、HTML5では<XMP>は廃止される予定になっています。

      【ブラウザ上の表示】
      <span style="color: dimgrey;"><b>2.<PRE>…ソースを整形済みテキスト表示</b></span>
      【HTML記述文字コード】
      <pre>
        &lt;span style=&quot;color: dimgrey;&quot;&gt;&lt;b&gt;2.&lt;PRE&gt;…ソースを整形済み
        テキスト表示&lt;/b&gt;&lt;/span&gt;
      </pre>
      

  5. <code>を使ったソースコード表示
  6. <code>~</code>で囲まれたテキストがソースコードであることを意味します。<code>はHTMLの要素名やファイル名などワンフレーズの場合には単独で使うこともできます。<pre>~</pre>の中に<code>~</code>を挟んで使用した場合には、スペースや改行・空白をそのままプレビューしてくれるます。CSSやJavaなどのプログラムソースの表示には最適です。ただ、HTMLのソースコードだとやはり実体参照変換する必要があります。

      【ブラウザ上の表示1】
      <span style="color: dimgrey;"><b>3.<code>を使ったソースコード表示</b></span>
      【HTML記述文字コード1】
      HTMLの特殊文字(タグやスペース・改行など)は文字実体参照変換する必要があります。
      <pre>
        <code>
          &lt;span style=&quot;color: dimgrey;&quot;&gt;&lt;b&gt;3.&lt;code&gt;を使ったソースコード表示&lt;/b&gt;&lt;/span&gt;
        </code>
      </pre>
      
      【ブラウザ上の表示2】
      pre {
       margin:0;
       padding:0;
       overflow:auto;
       white-space:pre-wrap;
       word-wrap:break-word;
      }
      
      【HTML記述文字コード2】
      CSS記述コードだと以下のようにスペースや改行をそのまま表示してくれます。
      <pre>
        <code>
          pre {
       margin:0;
       padding:0;
       overflow:auto;
       white-space:pre-wrap;
       word-wrap:break-word;
      }
        </code>
      </pre>
      

0 件のコメント:

コメントを投稿