西尾泰和のブログ

__ i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻。最近僕も1行が長いソースコードを貼り付ける(例: Just Another Python Hacker, その3、Just Another Ruby/Python Hacker,)のに、わざわざ改行してみたりtextareaを使ってみたり、と色々試行錯誤していたのですが、結局満足のいくできにならず。それならJavaScriptで、と思って試作したのが上のサンプルです。

最初のコードを<を&lt;に置換したりせずに直接貼り付けられないかと思ったのですが、preの中に貼り付けると、innerHTMLで取得した際に<br/>が<br>に置き換わるという現象が発生。それならとtextareaの中に貼り付けてみると、<の&lt;への変換も自動的に行われてラッキーと思ったのも束の間、IEで見ると改行が消えて1行になっていて使い物にならず…。むずかしいですねぇ。

やっぱり、手元で適当なツールで<のエスケープを行ってpreタグで貼り付けるのが一番なのかも知れませんね。textareaの中ならタグをエスケープしないでいいので楽かと思いきや、結局</textarea>が含まれている場合にはエスケープしなければ行けませんから。

後は、今はimgのonLoadで始動して、imgのaltをオリジナルのデータを保管する目的で使っていますが、もうちょっと何とかしたいですねー。

ソースコードは下記。 <script> function findTarget(tag, tagName){ do{ tag = tag.previousSibling; }while(tag.tagName != tagName); return tag; } function foo(start){ LINE_WIDTH = 60; target = findTarget(start, "TEXTAREA"); originalData = target.innerHTML; lines = originalData.split("\n"); data = "" for(i = 0; i < lines.length; i++){ line = lines[i]; while(line.length > LINE_WIDTH){ data += line.substring(0, LINE_WIDTH) + "\n"; line = line.substring(LINE_WIDTH); } data += line + "\n"; } newElem = document.createElement("PRE"); newElem.innerHTML = data start.parentNode.replaceChild(newElem, target); start.alt = originalData; } function bar(start){ target = findTarget(start, "PRE"); newElem = document.createElement("TEXTAREA"); newElem.innerHTML = start.alt; start.parentNode.replaceChild(newElem, target); start.alt = originalData; } </script> <textarea> print "<br/>" print "veryyyyyyyyyyyyyyyyyyyyyyyyy loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string" </textarea> <img alt="codearea.png" src="http://www.nishiohirokazu.org/blog/images/codearea.png" width="19" height="15" onLoad = "foo(this);" onClick = "bar(this);" border = 1/>←これを押すとTEXTAREAに変わる。 ←これを押すとTEXTAREAに変わる。