2006年09月06日 16:15 [Edit]

ソースを貼付ける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


この記事へのトラックバックURL

この記事へのトラックバック
Webにソースを貼り付ける話題は頻繁にされている模様。Blogにコードを貼り付ける時。 ブログにコードを貼り付ける方法で悩むの巻 Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 ソースを貼付ける50の方法 参考にしてみたが、そしてCSSの書籍をひっ....
LivedoorBlogにソースを貼り付ける(横はみ出防止)【嶋の徒然なる日々 with podcast】at 2007年10月16日 03:56
Sourceを貼付ける際に実体参照化するとき、みなさんはどうしていますか? 404 Blog Not Found:ソースを貼付ける50の方法コピペのしやすさでtextareaで囲む方法に比べて一歩及ばず、そしてtagの実体参照化が必要だという欠点はあります。 私はPerlのOne-Liner、 perl ...
javascript - Text to HTML Entities Encoder【404 Blog Not Found】at 2006年10月06日 17:38
404 Blog Not Found:ソースを貼付ける50の方法 Javascriptを使う方法ってのはカッコいいね。でもJavascriptOFFだと見れなくなるのか。 (tags: blog xhtml source) WebShotsPro.com : Free Website Screenshots - Website Thumbnail Service ...
links for 2006-09-08【オラオラ】at 2006年09月09日 06:25
先日の対談イベントの話を延々続けてもうしわけないのだがもう一つ蛇足ついでに書かせ
ユメの続き【ユメのチカラ】at 2006年09月07日 21:42
ブログにコードを貼り付ける方法で悩むの巻&nbsp;&nbsp;i&nbsp;...
Blogにコードを貼り付ける時。【hamashun.com blog】at 2006年09月07日 16:38
昨日書いた「ブログにコードを貼り付ける方法で悩むの巻」ですが、さまざまな方のブロ...
ソースの貼り付け方法その後【Idea * Idea】at 2006年09月07日 15:45