Crayon Syntax Highlighterを退役させたりとか全て Pygments 化したりとかからの流れで、「コピー&ペーストフレンドリ」へのさらなる取り組み、たる。
まず、何も措置しない場合の chrome と IE のそれぞれ(上が chrome、下が IE)：
chrome の「行全選択」が悪いとは言わないんだけれども、IE のこの振る舞いは、イケてるなぁ…。
でな、「全選択ボタン」を提供するのがいいのか、ダブルクリックの振る舞いを常に全選択にするのか、は悩ましい問題なのである。だって、「行選択がダブルクリックで出来る」ことが快適な場合だってあるでしょ。(だので IE の振る舞いは気持ちいい。)ので、ひとまずは反応するイベントについての考慮は棚上げにし、イベントハンドラの方はやっときたいぞ、と思ったわけだ。
まぁ…苦労したわ。結構あらゆるところで苦労してる痕跡がインターネットでは結構みつかる。
答え書いちゃえば出来上がったものは「なんてことない」んだけれど、ここに至るまでに随分時間かかった(半日)。
こんなです：
1 jQuery(function($) {
2
3 function selectText(el) {
4 var doc = document;
5 if (doc.body.createTextRange) {
6 var range = doc.body.createTextRange();
7 range.moveToElementText(el);
8 range.select();
9 } else if (window.getSelection) {
10 var range = doc.createRange();
11 range.selectNodeContents(el);
12 var selection = window.getSelection();
13 selection.removeAllRanges();
14 selection.addRange(range);
15 }
16 }
17
18 $(document).ready(function() {
19
20 var div = $('.pygment .highlight');
21 var pre = div.find('pre');
22
23 /* mainly for chrome...*/
24 pre.each(function (i) {
25 $(this).on('dblclick', function() { selectText(this); });
26 this.title = 'double-click to select all';
27 });
28 // ...snip...
29 });
30 });
やっててわかったことは、「あぁ、アタシってば、jQuery の $ を理解出来てないんだなぁ」てこと。「selectText」についてはあちこちで紹介されてて正解はずっと出てたんだが、これを「自分の jQuery コード」で使うようにするのに、selectText に何を渡せば良いのか、で苦心してしまった。
なお、上のスクリプトは WordPress に組み込みの jQuery が読み込まれていること前提です。
して、こうなった：
IE は改悪よねぇ、とは思う。chrome は快適になったわね。
