Bloggerさんで以下のようなhtmlモードでコピーしたハイライト済みhtmlがある状態で作成モードに遷移すると、
1
2
3
4
5
| ﾃｷｽﾄ行1ﾃｷｽﾄ行3ﾃｷｽﾄ行5 |
こんな感じで間延びします。
1
2
3
4
5
| ﾃｷｽﾄ行1ﾃｷｽﾄ行3ﾃｷｽﾄ行5 |
おまけに途中に空行がある場合、上記のように行番号も合わなくなる始末です。
原因は、作成モードに遷移するとhtmlが自動的に整形しなおされ、タグ間に改行文字が挟まれるためです。
さらに、本来の空行と改行してできた空行がごっちゃになって、行番号が合わないように見えるというからくりです。
まあ、ありのままに見せたい人向けにhtmlモードを用意してくれているのに、Bloggerさんに整形を任せる作成モードに自分で入ったんですから仕方がありません。
作成モードにしても保存しなけりゃいいんですが、両者を行ったり来たりできればなお便利です。
その対策を立てるとすると、結局見る直前で再整形してやるのが早いです。
この記事も、再整形機能を導入してhtmlモードにしてハイライト済みﾃｷｽﾄを貼り付けて、作成モードにして文章を入力して、の繰り返しで作成しました(いうまでもありませんが、上で例示した間延びﾃｷｽﾄは敢えてそのままにしてあります）。
再整形とは大仰ですが、実際にはやることは簡単で、改行文字を消して、本来の空行だったところに再度空行を追加するだけなので数行のｺｰﾄﾞで終わります。
具体的にはこんな感じです。引数のidにはハイライト済みhtmlが入ってるタグのidなら何でもいいですが、今回作ったcgiやhtmlではSyntaxHilighterが生成したidをそのまま流用していますので、そのidがいいでしょう。
概ねuniqueになるので、この記事のようにいくつも整形済みﾃｷｽﾄがあっても混同しませんので好都合です。
1
2
3
4
5
6
7
8
9
10
11
| function motonimodosu( id ) { var ele=document.getElementById(id); var str = ele.innerHTML; // 1. 強制改行を除去 str = str.replace(/\n/g,''); // 2. 本来の空行を再追加 str = str.replace( /div(.*?)><\/div/g, "div$1> </div"); ele.innerHTML = str;}; |
で、どうせjavascriptを使ってこういった予防措置をとるくらいなら、もう一歩進めてコード部分をダブルクリックするとソースを全選択した状態になるお役立ち機能を再実装してみたくなるのが人情です。
本来SyntaxHighlighterが整形処理の際に同時にイベントハンドラに追加しているのですが、今回の場合は整形済みﾃｷｽﾄを持ってきているのですから、イベントを処理することはできません。単なるﾃｷｽﾄですから。
そのため、実装って言ったって、本来の処理同様、codeタグ全部にイベントハンドラを設定するだけです。
で、具体的にはこれだけ。
引数は上記の関数と同じで、ハイライト済みhtmlが入ってるタグのidです。
1
2
3
4
5
6
| function addDblClickListener(id){ var codes = document.getElementById(id).getElementsByTagName('code'); for(i=0;i<codes.length;i++){ codes[i].addEventListener( "dblclick", quickCodeHandler ) ; }} |
quickCodeHandlerを動作させるにはfindElement, findParentElement, hasClass, addClass, removeClass, attachEventの6関数だけです。
これで、あのｽﾊﾞﾗｼｲ機能が再びわがものとなります。
次回は(まだ引っ張るのかよ)前回お示ししたhtmlに加え、これらの処理を自動化させた処理を追加したhtmlのオンラインデモをお試しいただきますと同時に、このhtmlの使い方を説明したいと思います。
とりあえず今回はこれまでです。
以下、ライセンスに絡む事務連絡というか公開になります。
イベント再設定関数+quickCodeHandlerおよび前述6関数の計8関数とBloggerさん固有の改行対策関数を別ファイルにまとめて再パックして若干機能追加を行ったのが以下のhtmlになります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
| <!-- ライセンス条項に基づく表記: (ダブルクリック時の処理のため関数を取り込んだのでご容赦ください) The MIT License Copyright 2017 ayumi https://ttgcameback.blogspot.com/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. The packed code (PACKED_LIB) included in this program has a code of Syntax Highighter. SyntaxHighlighter http://alexgorbatchev.com/SyntaxHighlighter Copyright (C) 2004-2010 Alex Gorbatchev. MITって柾ﾁｭｰ大学摂津校じゃないかもしれない--><!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>サーバなしでハイライト済みﾃｷｽﾄを生成するページ</title> <meta charset="utf-8" /> <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script> <script type="text/javascript"> var version = "syntaxhighlighter_3.0.83"; var brushes = { 'ActionScript3': ['as3', 'shBrushAS3.js', ], 'Bash/shell': ['bash', 'shBrushBash.js', ], 'ColdFusion': ['cf', 'shBrushColdFusion.js', ], 'C#': ['c-sharp', 'shBrushCSharp.js', ], 'C++': ['cpp', 'shBrushCpp.js', ], 'CSS': ['css', 'shBrushCss.js', ], 'Delphi': ['delphi', 'shBrushDelphi.js', ], 'Diff': ['diff', 'shBrushDiff.js', ], 'Erlang': ['erl', 'shBrushErlang.js', ], 'Groovy': ['groovy', 'shBrushGroovy.js', ], 'JavaScript': ['js', 'shBrushJScript.js', ], 'Java': ['java', 'shBrushJava.js', ], 'JavaFX': ['jfx', 'shBrushJavaFX.js', ], 'Perl': ['perl', 'shBrushPerl.js', ], 'PHP': ['php', 'shBrushPhp.js', ], 'Plain Text': ['plain', 'shBrushPlain.js', ], 'PowerShell': ['ps', 'shBrushPowerShell.js', ], 'Python': ['py', 'shBrushPython.js', ], 'Ruby': ['ruby', 'shBrushRuby.js', ], 'Scala': ['scala', 'shBrushScala.js', ], 'SQL': ['sql', 'shBrushSql.js', ], 'Visual Basic': ['vb', 'shBrushVb.js', ], 'XML': ['xml', 'shBrushXml.js', ], }; var styles = { "Default": ['shCoreDefault.css', 'shThemeDefault.css'], "Django": ['shCoreDjango.css', 'shThemeDjango.css'], "Eclipse": ['shCoreEclipse.css', 'shThemeEclipse.css'], "Emacs": ['shCoreEmacs.css', 'shThemeEmacs.css'], "FadeToGrey": ['shCoreFadeToGrey.css', 'shThemeFadeToGrey.css'], "MDUltra": ['shCoreMDUltra.css', 'shThemeMDUltra.css'], "Midnight": ['shCoreMidnight.css', 'shThemeMidnight.css'], "RDark": ['shCoreRDark.css', 'shThemeRDark.css'], }; // bloggerで作成モードに戻って保存した場合の救済関数と // ダブルクリック時のコピーモード遷移機能の付与のため // shrink.jsをpackしたコードを張り付け function attachScript( id ){ if (!isChecked('checkbox_blogger_linebreak_remove') && !isChecked('checkbox_copy_paste_helper')) { return ""; } var PACKED_LIB = "eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\\\b'+e(c)+'\\\\b','g'),k[c]);return p}('2 P(a){4 b=f.y(a);4 c=b.z;c=c.o(/\\\\n/g,\\'\\');c=c.o(/h(.*?)><\\\\/h/g,\"h$1>&Q;</h\");b.z=c};2 R(a){4 b=f.y(a).S(\\'5\\');p(i=0;i<b.q;i++){b[i].A(\"T\",B)}}2 j(a,b,c){6(a==s)7 s;4 d=c!=C?a.D:[a.E],t={\\'#\\':\\'U\\',\\'.\\':\\'9\\'}[b.F(0,1)]||\\'G\\',u,k;u=t!=\\'G\\'?b.F(1):b.V();6((a[t]||\\'\\').H(u)!=-1)7 a;p(4 i=0;d&&i<d.q&&k==s;i++)k=j(d[i],b,c);7 k};2 v(a,b){7 j(a,b,C)};2 I(a,b){7 a.9.H(b)!=-1};2 J(a,b){6(!I(a,b))a.9+=\\' \\'+b};2 K(a,b){a.9=a.9.o(b,\\'\\')};2 B(e){4 a=e.w,l=v(a,\\'.W\\'),8=v(a,\\'.8\\'),3=f.X(\\'3\\'),Y;6(!8||!l||j(8,\\'3\\'))7;J(l,\\'L\\');4 b=8.D,5=[];p(4 i=0;i<b.q;i++)5.Z(b[i].10||b[i].11);5=5.12(\\'\\\\r\\');3.M(f.13(5));8.M(3);3.14();3.15();m(3,\\'16\\',2(e){3.E.17(3);K(l,\\'L\\')})};2 m(a,b,c,d){2 x(e){e=e||N.18;6(!e.w){e.w=e.19;e.1a=2(){1b.1c=O}}c.1d(d||N,e)};6(a.m){a.m(\\'1e\\'+b,x)}1f{a.A(b,x,O)}};',62,78,'||function|textarea|var|code|if|return|container|className||||||document||div||findElement|found|highlighterDiv|attachEvent||replace|for|length||null|propertyToFind|expectedValue|findParentElement|target|handler|getElementById|innerHTML|addEventListener|quickCodeHandler|true|childNodes|parentNode|substr|nodeName|indexOf|hasClass|addClass|removeClass|source|appendChild|window|false|LBRemover|nbsp|addDblClickListener|getElementsByTagName|dblclick|id|toUpperCase|syntaxhighlighter|createElement|highlighter|push|innerText|textContent|join|createTextNode|focus|select|blur|removeChild|event|srcElement|preventDefault|this|returnValue|call|on|else'.split('|'),0,{}))"; var scriptstr = "\n<script type=\"text/javascript\">\n"; if (isChecked('checkbox_append_library')) { scriptstr += "/*SyntaxHighlighter Copyright (C) 2004-2010 Alex Gorbatchev.*/\n" scriptstr += PACKED_LIB + ";"; } var utility_function_str = "(function(){"; if (isChecked('checkbox_blogger_linebreak_remove')) { utility_function_str += "LBRemover('" + id + "');"; } if (isChecked('checkbox_copy_paste_helper')) { utility_function_str += "addDblClickListener('" + id + "');"; } utility_function_str += "})()\n"; scriptstr += utility_function_str; scriptstr += '<' + "/script>"; // デモ用にこのプログラムのdomにもスクリプトをくっつける var ele = document.getElementById('packed_lib_script'); if (ele == null) { ele = document.createElement("script"); ele.type = "text/javascript"; ele.innerHTML = PACKED_LIB; ele.id = "packed_lib_script"; document.getElementsByTagName('head')[0].appendChild(ele); } ele = document.getElementById('packed_lib_exec_script'); if (ele != null) { document.body.removeChild(ele); ele = null; } ele = document.createElement("script"); ele.type = "text/javascript"; ele.innerHTML = utility_function_str; ele.id = "packed_lib_exec_script"; document.getElementsByTagName('body')[0].appendChild(ele); return scriptstr; } function toClipBoard(id) { var ele = document.getElementById(id); if (ele != null) { ele.select(); document.execCommand("copy"); } } function loadfile(fname) { try{ var xmlHttp = new XMLHttpRequest(); xmlHttp.overrideMimeType("text/plain"); xmlHttp.open("GET", fname, false); xmlHttp.send(null); return xmlHttp.responseText; } catch (e) { return null; } } function loadStyle() { var eles = document.getElementsByName("style"); for (i = 0; i < eles.length; i++) { if (eles[i].checked) { var fname = version + "/styles/" + styles[eles[i].value][0]; var stylestr = loadfile(fname); if (stylestr == null) { document.getElementById('div_nonchrome').style.display = 'none'; document.getElementById('div_chrome').style.display = "block"; document.getElementById('atag_style').href = fname; } else { document.getElementById('style_textarea').value = "<style type=\"text/css\">" + stylestr + "\n.syntaxhighlighter {overflow-y: hidden !important;};"//縦ｽｸﾛｰﾙﾊﾞｰ消去 + "</style>"; } //スタイルの付け替え var head = document.getElementsByTagName('head')[0]; var ele = document.getElementById("id_stylelink"); if (ele != null) { head.removeChild(ele); } var link = document.createElement('link'); link.id = "id_stylelink"; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = fname; head.appendChild(link); } } } function getBrush() { var eles = document.getElementsByName("brush"); for (i = 0; i < eles.length; i++) { if (eles[i].checked) { return brushes[eles[i].value][0]; } } } function isChecked(id) { var ele = document.getElementById(id); if (ele == null) { alert(id + " is null"); } return ele.checked; } function makeRadioTable(type) { var arr = brushes; if (type == "style") { arr = styles; } var COLMAX = 5; var cnt = 0; var str = "<table>"; str += "<tr><th colspan='" + COLMAX + "' align='center'>"; if (type == "style") { str+="スタイル"; } else { str += "言語(ブラシ)"; } str += "の選択</th></tr>"; for (var key in arr) { if (cnt % 5 == 0) { if (cnt != 0) { str += "</tr>"; } str += "<tr>"; } str += "<td><input type='radio' name='" + type + "' value='" + key + "'"; if (key == "C++" || key == "Django") { str += " checked"; } str += " /><label>" + key + "</label>"; cnt++; } if (cnt % 5 != 0) { for (var i = 0 ; i < cnt - (cnt % 5) ; i++) { str += "<td></td>"; } } str += "</tr></table>"; return str; } function makeRadioButtons() { var radiobuttonarea = document.getElementById('radiobuttonarea'); radiobuttonarea.innerHTML += makeRadioTable('style') + makeRadioTable('brush'); } function getSyntaxHighlighterId( ele ) { var divs = ele.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { if (divs[i].id.match(/^highlighter_/)) { return divs[i].id; } } return null; } function conv() { load_brushes(); document.getElementById('resultdispareadiv').style.display = "block"; loadStyle(); var divdiv = document.getElementById('divdiv'); var pre = document.getElementById('preprepre'); var otheropts = document.getElementById('text_otheroption').value; if (pre != null && pre.tagName.match(/DIV/i)) { divdiv.removeChild(pre); pre = null; } if (pre == null) { pre = document.createElement('pre'); divdiv.appendChild(pre); pre.id = 'preprepre'; } var src_textarea = document.getElementById("src_textarea"); var dst_textarea = document.getElementById("dst_textarea"); dst_textarea.value = ""; var src = src_textarea.value; pre.className = "brush: " + getBrush(); if (otheropts != "") { pre.className += " " + otheropts; } pre.textContent = src; SyntaxHighlighter.defaults['auto-links'] = isChecked('checkbox_auto_links'); SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['html-script'] = isChecked('checkbox_html_highlight'); SyntaxHighlighter.defaults['tab-size'] = document.getElementById("text_tabsize").value; SyntaxHighlighter.defaults['gutter'] = isChecked('checkbox_gutter'); SyntaxHighlighter.config.bloggerMode = isChecked('checkbox_blogger_mode'); SyntaxHighlighter.highlight(); var result = document.getElementById("preprepre"); var shid = getSyntaxHighlighterId(result); var resulthtml = result.innerHTML; // もう不要(これ以降htmlテキストをコピーするのでidが重複) divdiv.removeChild(result); var resultpreview = document.getElementById("resultdiv"); resultpreview.innerHTML = "<h3>ハイライト処理済みhtml版プレビュー</h3>" + resulthtml; dst_textarea.value = resulthtml + attachScript(shid); } function appendBrushScript(src) { var s = document.createElement('script'); s.type = 'text/javascript'; s.src = version + "/scripts/" + src; document.head.appendChild(s); } function load_brushes() { //appendBrushScript("shCore.js"); for (var key in brushes) { appendBrushScript(brushes[key][1]); } } // ブラシスクリプトの一括ﾛｰﾄﾞ load_brushes(); </script></head><body> <div id="radiobuttonarea"></div> <script type="text/javascript"> makeRadioButtons(); </script> <input type="checkbox" id="checkbox_html_highlight" name="checkbox_html_highlight" value="true" /> <label>html-script</label> <input type="checkbox" id="checkbox_blogger_mode" name="checkbox_blogger_mode" value="true" /> <label>Blogger mode</label> <input type="checkbox" id="checkbox_auto_links" name="checkbox_auto_links" value="true" /> <label>auto-linkes</label> <input type="checkbox" id="checkbox_gutter" name="checkbox_gutter" value="true" checked /> <label>行番号</label> <br /> <input type="checkbox" id="checkbox_blogger_linebreak_remove" name="checkbox_blogger_linebreak_remove" value="true" checked /> <label>Bloggerで生成モードで更新してしまって表示が崩れた場合のお助け処理を追加(※)</label> <br /> <input type="checkbox" id="checkbox_copy_paste_helper" name="checkbox_copy_paste_helper" value="true" checked /> <label>「ダブルクリックでコピーモードに遷移」機能の再追加(※)</label> <br /> <small>(※:javascriptが整形済みhtml末尾に追加されます)</small> <br /> <input type="checkbox" id="checkbox_append_library" name="checkbox_append_library" value="true" checked /> <label>※印で必要な関数を整形済みhtml末尾に追加<small>(最初に表示される整形済みﾃｷｽﾄだけに追加で十分です)</small></label> <br /> <br /> TABサイズ:<input type="text" size="2" id="text_tabsize" name="text_tabsize" value="2" /> その他の追加属性(開始行番号など):<input type="text" size="20" id="text_otheroption" name="text_otheroption" value="" /> <br /> <br /> 変換元テキスト入力欄: <input type="button" value="ハイライト実行" onclick="javascript: conv();" /> <br /> <textarea id="src_textarea"></textarea> <br /> <div id="resultdispareadiv" style="display:none"> <table> <tr> <td> <div id="div_nonchrome"> ハイライト用スタイル:<br /> <textarea id="style_textarea"></textarea> <br /> <input type="button" value="クリップボードにコピー" onclick="javascript: toClipBoard('style_textarea');" /> </div> <div id="div_chrome" style="display:none;background-color:bisque"> <small> Chromeをお使いの方はGoogle様の保護により、<br /> Edgeをお使いの方はMicrosoft様の優しさにより、<br /> お使いのブラウザではローカルファイルをプログラムで<br /> ﾛｰﾄﾞする権限が与えられておりません。<br /> お気の毒ですが<a href="" id="atag_style" target="_blank">こちら</a>を手動で開きコピーして、<br /> コピー内容を<br /> <b><style type="text/css">のようなタグで囲って</b><br /> blogなどの対象にペーストしてください。<br /> このリンクは単にスタイルで指定したcssファイル<br /> へのリンクです。 </small> </div> </td> <td> ハイライト済ﾃｷｽﾄ:<br /> <textarea id="dst_textarea"></textarea> <br /> <input type="button" value="クリップボードにコピー" onclick="javascript: toClipBoard('dst_textarea');" /> </td> </tr> </table> </div> <!-- 縦ｽｸﾛｰﾙﾊﾞｰを隠す --> <style> .syntaxhighlighter { overflow-y: hidden !important; } </style> <div id="divdiv"> <div id="resultdiv"></div> <pre id="preprepre"></pre> </div> <div> <a href='http://alexgorbatchev.com/SyntaxHighlighter' target="_blank">SyntaxHighlighter</a><br /> Copyright (C) 2004-2010 Alex Gorbatchev.<br /> </div></body></html> |
例の強制改行除去＋空行再追加とイベントハンドラの再設定、およびイベントハンドラを構成する関数をまとめたものです。
面白いのは、コメント中にあるアポストロフィの数が合わないもんだからハイライトが途中でおかしくなっています。
まあ、そこまでやってらんねーんでしょうね。
パックにはhttp://dean.edwards.name/packer/さんを利用させていただきました。
いずれにせよ、パックされたjavascriptをそのまま再利用するのが気持ち悪い方は下記をご利用ください。見た目とﾛｰﾄﾞ時間が冗長なだけで効果は同一です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
| /** * SyntaxHilighter(v3)のいいところどり補助ライブラリ * http://dean.edwards.name/packer/ などで圧縮すると素敵 * 本コードにはSyntaxHilighterのshCore.jsのコードの一部を抜粋・改変して掲載されています。 * SyntaxHighlighter * http://alexgorbatchev.com/SyntaxHighlighter * Copyright (C) 2004-2010 Alex Gorbatchev. * * 本コード自身はMITライセンスとして提供します。 * ライセンス条項に基づく表記: * The MIT License * * Copyright 2017 ayumi https://ttgcameback.blogspot.com/ * Permission is hereby granted, free of charge, to any person obtaining a * copy of this software and associated documentation files (the "Software"), * to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS * IN THE SOFTWARE. *//** * bloggerで作成モードに移行した際に強制改行された * ハイライト結果をもとに戻す * @param id: ハイライト済みhtmlのdivのid(highlighter_317189など) */function LBRemover( id ){ var ele=document.getElementById(id); var str = ele.innerHTML; // 1. 強制改行を除去 str = str.replace(/\n/g,''); // 2. 空行を再追加 // bloggerではdivタグの後は強制改行? // 当然文字列リテラル内かどうかは無関係なのでこのｺｰﾄﾞも例外でない str = str.replace( /div(.*?)><\/div/g, "div$1> </div"); //空行は<div class="line number9 index8 alt2"> </div>が //以下の二行に分解されてnbspが消される様子。 //<div class="line number9 index8 alt2"> //</div> ele.innerHTML = str;};/** * ダブルクリックで一括コピーモードに遷移するイベントを仕掛ける * @param id: ハイライト済みhtmlのdivのid(highlighter_317189など) */function addDblClickListener(id){ var codes = document.getElementById(id).getElementsByTagName('code'); for(i=0;i<codes.length;i++){ codes[i].addEventListener( "dblclick", quickCodeHandler ) ; }}//// 以下は shCore.jsからコピー関連のスクリプトを抜粋したものです/////** * Looks for a child or parent node which has specified classname. * Equivalent to jQuery's $(container).find(".className") * @param {Element} target Target element. * @param {String} search Class name or node name to look for. * @param {Boolean} reverse If set to true, will go up the node tree instead of down. * @return {Element} Returns found child or parent element on null. */function findElement(target, search, reverse /* optional */){ if (target == null) return null; var nodes = reverse != true ? target.childNodes : [ target.parentNode ], propertyToFind = { '#' : 'id', '.' : 'className' }[search.substr(0, 1)] || 'nodeName', expectedValue, found ; expectedValue = propertyToFind != 'nodeName' ? search.substr(1) : search.toUpperCase() ; // main return of the found node if ((target[propertyToFind] || '').indexOf(expectedValue) != -1) return target; for (var i = 0; nodes && i < nodes.length && found == null; i++) found = findElement(nodes[i], search, reverse); return found;};/** * Looks for a parent node which has specified classname. * This is an alias to <code>findElement(container, className, true)</code>. * @param {Element} target Target element. * @param {String} className Class name to look for. * @return {Element} Returns found parent element on null. */function findParentElement(target, className){ return findElement(target, className, true);};/** * Checks if target DOM elements has specified CSS class. * @param {DOMElement} target Target DOM element to check. * @param {String} className Name of the CSS class to check for. * @return {Boolean} Returns true if class name is present, false otherwise. */function hasClass(target, className){ return target.className.indexOf(className) != -1;};/** * Adds CSS class name to the target DOM element. * @param {DOMElement} target Target DOM element. * @param {String} className New CSS class to add. */function addClass(target, className){ if (!hasClass(target, className)) target.className += ' ' + className;};/** * Removes CSS class name from the target DOM element. * @param {DOMElement} target Target DOM element. * @param {String} className CSS class to remove. */function removeClass(target, className){ target.className = target.className.replace(className, '');};/** * Quick code mouse double click handler. */function quickCodeHandler(e){ var target = e.target, highlighterDiv = findParentElement(target, '.syntaxhighlighter'), container = findParentElement(target, '.container'), textarea = document.createElement('textarea'), highlighter ; if (!container || !highlighterDiv || findElement(container, 'textarea')) return; //highlighter = getHighlighterById(highlighterDiv.id); // add source class name addClass(highlighterDiv, 'source'); // Have to go over each line and grab it's text, can't just do it on the // container because Firefox loses all \n where as Webkit doesn't. var lines = container.childNodes, code = [] ; for (var i = 0; i < lines.length; i++) code.push(lines[i].innerText || lines[i].textContent); // using \r instead of \r or \r\n makes this work equally well on IE, FF and Webkit code = code.join('\r'); // inject <textarea/> tag textarea.appendChild(document.createTextNode(code)); container.appendChild(textarea); // preselect all text textarea.focus(); textarea.select(); // set up handler for lost focus attachEvent(textarea, 'blur', function(e) { textarea.parentNode.removeChild(textarea); removeClass(highlighterDiv, 'source'); });};/** * Adds event handler to the target object. * @param {Object} obj Target object. * @param {String} type Name of the event. * @param {Function} func Handling function. */function attachEvent(obj, type, func, scope){ function handler(e) { e = e || window.event; if (!e.target) { e.target = e.srcElement; e.preventDefault = function() { this.returnValue = false; }; } func.call(scope || window, e); }; if (obj.attachEvent) { obj.attachEvent('on' + type, handler); } else { obj.addEventListener(type, handler, false); }}; |
今度こそ以上です。
0 件のコメント:
コメントを投稿