ソースを貼付ける50の方法

いえ、50もありません。Paul Simonの歌のもじりです、はい。ちなみに6曲目。いいんです。Paul Simonだって50も紹介してないんですから。

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻

昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。

<textarea>で囲む

身も蓋もないけど、一番実用性が高いのがこの方法かも知れません。

HTMLの精神からいくととんでもなく堕落した方法ですが、

• コピペがしやすい
• たいていのブラウザーで、いちいちソース中のtagを実体参照化しなくてもちゃんとrenderされる

という実においしい特典があります。実は一つ前のentryでも、この方法を採用しております。

<pre>で囲む

次に有効なのがこの方法。これをCSSと組み合わせると、見やすさの点でもHTMLの精神の点でも実にいい感じで、アルファギークが最もよく使う手法だと思われますが、コピペのしやすさでtextareaで囲む方法に比べて一歩及ばず、そしてtagの実体参照化が必要だという欠点はあります。

ちなみに本blogでは<pre>のCSSは、

pre{
    font-size:medium;
    /* line-height:1.2em; */
    border:1px solid #aaa;
    background:#eee;
    padding:0.5em; 
    overflow: auto;
}

としており、必要な時だけスクロールバーが現れるようにしています。

<script>タグの中身を、javascriptで再展開する

最もGeekうけする方法の一つがこれ。こんな感じでやります。

ソースはこちら:

種明かし:

<script language="javascript" type="text/javascript" id="src">
function $(id){ return document.getElementById(id); }
String.prototype.encode_entities=function(){
  return this.replace(/([<>&])/g, function(m0,m1){ 
    return { '<':'&lt;', '>':'&gt;', '&':'&amp;' }[m1]
  });
}
window.onload=function(e){
  $('src.view').innerHTML=$('src').innerHTML.encode_entities();
}
</script>

非常にgeek受けする方法ですし、なんといっても二重のコピペが不要という利点がありますが、javascriptでしか使えない、ブラウザーによってはscriptタグのidを無視するなどの理由で今ではあまりやってません。

通常の<pre>タグの中身をevalする

上記の手法の逆を行くやりかたです。当blogでは、404 Blog Not Found:javascript - Lambda Calculusなどで使った方法ですが、これまた上記の欠点をそのまま引きずっており、最近はあまりやってません。

多彩な方法はあれど結局いつもはオーソドックスな方法に落ち着くというのは、codeもcoitusも変わらないようで。

Dan the Open Source Programmer -- Too Open, Maybe