ブログにコードを貼り付ける方法.js alpha0.2(Firefox only)
ブログにコードを貼り付ける方法.js alpha0.1の続編。コード中の<, >, &をエスケープしてPREタグで囲い、後ろにimgタグを貼り、onLoadからJavaScriptで書かれた関数を呼び出すことで、画面には適切な長さで折り返して見やすく表示しつつ、JavaScriptで生成されたcopyボタンを押すとソースコードがクリップボードにコピーされます。この時はもちろん、<が<に戻された状態でコピーされます。
クリップボードにコピーするコードは最速インターフェース研究会 :: Firefoxでテキストをクリップボードにコピーする方法から、ソースコードを新しいウィンドウで開くコードはKazuho@Cybozu Labs: Ajax な HTML ページのソースコードを表示するから流用しました。
サンプル。
print "very loooooooooooooooooooooooooooooooooooooooooooong striiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiing & <html> tag"
コードは下記。
追記："aaa".replace("a", "b")では最初のaしか置換されないんですねぇ。 "aaa".replace(/a/ig, "A")に変更しました。
<script>
function findTarget(tag, tagName){
do{
tag = tag.previousSibling;
}while(tag.tagName != tagName);
return tag;
}
function wrapCode(start){
LINE_WIDTH = 60;
var target = findTarget(start, "PRE");
var originalData = target.innerHTML;
lines = originalData.split("\n");
wrappedData = ""
for(i = 0; i < lines.length; i++){
line = lines[i];
while(line.length > LINE_WIDTH){
wrappedData += line.substring(0, LINE_WIDTH) + "\n";
line = line.substring(LINE_WIDTH);
}
wrappedData += line + "\n";
}
var pureData = originalData.replace(/</ig, "<");
pureData = pureData.replace(/>/ig, ">")
pureData = pureData.replace(/&/ig, "&");
function copy(){
setClipboard(pureData);
}
insertButton(start, "Copy to clipboard", copy);
function openWindow(){
w = window.open(
'about:blank', '',
'scrollbars=yes,dependent=yes,resizable=yes,menubar=yes,toolbar=yes'
);
w.stop();
w.document.write('<plaintext>' + pureData);
}
insertButton(start, "Open window", openWindow);
target.innerHTML = wrappedData;
}
function insertButton(start, caption, handler){
var newElem = document.createElement("INPUT");
newElem.type = "BUTTON";
newElem.value = caption;
newElem.onclick = handler;
start.parentNode.insertBefore(newElem, start);
}
</script>
<pre>
print "very loooooooooooooooooooooooooooooooooooooooooooong striiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiing & <html> tag"
</pre>
<img src="http://www.nishiohirokazu.org/blog/images/codearea.png" onLoad = "wrapCode(this);" border = 1>
