Code Snippet

想要在blog貼一段程式碼，這是個很基本的需求，但是真麻煩。

假設想要貼上以下這段java程式碼：

public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}

首先會遇到兩個問題，「<」、「>」在HTML用來表示標籤，必須要用「&lt;」取代「<」，「&gt;」取代「>」，否則無法正常顯示，還有一些特殊用途的符號也需要避開：「&amp;」取代「&」，「&quot;」取代「"」，另外就是空白和斷行的問題，必須要用「&nbsp;」(non-breaking space)和「<br />」表示(r和/之間的空格好像是為了相容於較舊的瀏覽器)，不過若是使用網頁編輯器，通常都會自動置換這些符號。
程式碼片段可以放在<code></code>之間，但是這個標籤只是用來增加文字片段的結構資訊，對於頁面的顯示沒有影響。
接著通常會以CSS來修改顯示方式，這時就看個人的創意了，例如：

/* for code */
code, .code {
  display: block;
  background: #E3F5D2;
  padding: 10px 10px 10px 21px;
  margin: 10px;
  border: 1px solid #CCCCCC;
  max-height: 300px;
  overflow: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 95%;
  line-height: 120%;
}

<code> example：

• demo
• source

//This is a code tag test
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}

<code>
<span style="color:#FF0000">//This is a code tag test</span><br />
public static &lt;T&gt; void copy(List&lt;? super T&gt; dst, List&lt;? extends T&gt; src) {<br />
&nbsp;&nbsp;for (int i = 0; i &lt; src.size(); i++) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;dst.set(i, src.get(i));<br />
&nbsp;&nbsp;}<br />
}
</code>

但以這種方法來處理空白和斷行，還是太麻煩了，這時可以試試看「<pre>」或「<textarea>」。
<pre></pre>(preformatted text)會將標籤所包圍的空白和斷行顯示在網頁上，但仍舊會處理其中的HTML標籤，所以仍需要置換特殊符號，這也表示可以用CSS修飾程式碼。
<textarea></textarea>會將標籤所包圍的文字全部顯示，但這也表示無法用CSS修飾程式碼，而且比較麻煩的是必須自己設定寬高和唯讀等屬性。(這是目前所知的情況，也許有其他的好方法可以辦到。)

<pre> example：

• demo
• source

//This is a pre tag test
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}

<pre class="code">
<span style="color:#FF0000">//This is a pre tag test</span>
public static &lt;T&gt; void copy(List&lt;? super T&gt; dst, List&lt;? extends T&gt; src) {
  for (int i = 0; i &lt; src.size(); i++) {
    dst.set(i, src.get(i));
  }
}
</pre>

<textarea> example：

• demo
• source

//This is a textarea tag test public static <T> void copy(List<? super T> dst, List<? extends T> src) { for (int i = 0; i < src.size(); i++) { dst.set(i, src.get(i)); } }

<textarea name="textarea" rows="6" readonly="readonly" class="code" style="width:90%">
//This is a textarea tag test
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}
</textarea>

所以結論是，用<pre>似乎是比較方便的方法，不用自己設定寬高，也可以用CSS修飾達成syntax highlight的效果。