ページ

▼

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; © コピーライト

  2. <PRE>…ソースを整形済みテキスト表示
    3.  <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>

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

      【ブラウザ上の表示１】
      <span style="color: dimgrey;"><b>3.<code>を使ったソースコード表示</b></span>
      【HTML記述文字コード１】
      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>
      【ブラウザ上の表示２】
      pre {
 margin:0;
 padding:0;
 overflow:auto;
 white-space:pre-wrap;
 word-wrap:break-word;
}
      【HTML記述文字コード２】
      CSS記述コードだと以下のようにスペースや改行をそのまま表示してくれます。
      <pre>
  <code>
    pre {
 margin:0;
 padding:0;
 overflow:auto;
 white-space:pre-wrap;
 word-wrap:break-word;
}
  </code>
</pre>

時刻:

0 件のコメント:

コメントを投稿