pre 要素の中身をエスケープせずに書く

HTML JavaScript 
<pre>
  var x = <root>
    <list>hoge</list>
  </root>;
  for (var i=0; i < x.*.length(); i++){
    hogehoge(x.*[i]);
  }
</pre>

とか基本エスケープせずに書きたい。
ついでに

  • 文頭、文末の改行のみの部分は削除しておきたい
  • 先頭のインデント部分の空白部分は削除しておきたい
<pre><![CDATA[>
  var x = <root>
   ...
]]></pre>
  • CDATAセクションにする
  • 最初の>は vim のシンタックスハイライトが変になるのを回避するため
function onload() {
  stripSpace();
}
function stripSpace(){
  var pres = document.querySelectorAll("pre");
  var indent = 0;
  for (var i=0, len = pres.length; i < len; i++){
    pres[i].firstChild.data = pres[i].fistChild.data
      .split(/\r\n|\n/)
      .slice(1, -1) // 文頭、文末の行を削除
      .map(function(line, k){
        if (k == 0) // インデントの長さを取得しておく
          indent = line.match(/^\s*)[0].length;
        return line.substing(p);
      })
      .join("\n");
  }
}

問題はいろいろあるが、とりあえず、書きやすくなった。