Bloggerでソースコードをハイライトする「Code Prettify」をブックマークレット化

Bloggerでソースコードをハイライトする「Code Prettify」を導入したのはいいけど、ちょっと変換作業が大変だったのでブックマークレット化してみた。自分用。

■ブックマークレット
・Code Prettify Bookmarklet for Blogger
※ブックマークレットの追加は上記リンクを右クリック→追加、かブックマークツールバー欄にドラック＆ドロップで。


ソースの中身

javascript:

function getSelectedTextAndReplace() {
    IE='\v'=='v';
    var SelectedText;
    if(IE) {
        var objSelectedText = document.selection;
        var objTextRange = objSelectedText.createRange();

        if (document.selection.createRange().text.length == 0) {
            return;
        }
        try {
                SelectedText = objTextRange.text;
                objTextRange.text = strToBloggerCodeTag(SelectedText);
        } catch (e){
        }
    } else {
        SelectedText = window.getSelection().toString();

        var obj = document.getElementById("postingHtmlBox");
        var ns = obj.selectionStart;
        var ne = obj.selectionEnd;
        var nl;
        if ( ns != ne ) {
            var txt = strToBloggerCodeTag(SelectedText);
            txt = obj.value.substring(0, ns) + txt + obj.value.substring(ne,obj.value.length);
            obj.value = txt;
            obj.setSelectionRange(ns,ns+nl);
        }
    }
}

function strToBloggerCodeTag(str) {
  return "<pre class=\"prettyprint\">\n" + escapeHTML(str) + "\n</pre>";
}

function escapeHTML(strTarget){
    var div = document.createElement('div');
    var text =  document.createTextNode('');
    div.appendChild(text);
    text.data = strTarget;
    return div.innerHTML;
}

getSelectedTextAndReplace();

void(0);

たぶんfirefoxとchromeでしか使わないけど、IEでも一応動いた。
名前とかいまいちだしコードツギハギだけど、とりあえず自分用なのでOK！

またリファクタリングしたい。

あとblogger編集画面textareaのidであるpostingHtmlBoxの中身をみてるので、
id名が変わったら書き換えが必要になりそう。

参考
・bookmarkletで選択文字列を取得することを考える - 徒書
・JS : テキストエリア内の選択文字列の置き換え :logical　error