2017年3月21日火曜日

サーバいらず版SyntaxHighlighterによるハイライト表示テキスト生成htmlのオンラインデモ

サーバが要らねえって言っときながらオンラインデモってどういうことなんだとお悩みの諸兄にまったく同感です。

まず、とりあえずミセロ、というお兄さんお姉さんにはこちら

百聞は一見に如かずと申します。
ご覧いただいている隙に、例によって前置きです。

まず、サーバ不要ってどういう意味なのさ、というと、閲覧していただく方には整形(ハイライト)済みhtmlだけお示しして、ブログを読んでいただく方のため向けに別個にスクリプトダウンロード元サーバは用意する必要がありませんよ、という意味での「サーバ不要」です。
(駄文を配信していただくためのBloggerさんのhttpdは依然必要です)。

整形済みテキストを作る場所はマイドキュメント内でも今回のデモのようにどこかのレンタルサーバでも、ブラウザがhtmlファイルを読み込める場所ならどこでも構いません。結局はあなたが利用しているブラウザが全部やります。

今回オンラインデモを用意しましたのは、ワンクリックで見ることができて便利だから以上の意味はありません。
(ちょっと虫のいいお願いで恐縮ですが、万が一リンクしてくださるにしても、オンラインデモへの直撃はご容赦くだされば幸いです。ちょっと買収劇がうるさい様子ですので引っ越しする可能性があります)

一度ページが読み込まれてしまうと、以後すべてあなたの計算機上で処理されますから、ページの読み込み元はハードディスクだろうがオンラインだろうが結果は同じことです。

さて、これまでの話を再確認させてください。
  1. どうせ前処理が必要なら最初から全部やればいいんじゃない?。そうすればハイライト済みテキストを見ていただく閲覧者に毎回SyntaxHighlighter一式の実行を求めなくていいじゃないのよ。
  2. 実行を求めない以上、そもそも実行しないのだから掲載する先(この場合はBlogger)上でのSyntaxHighlighterの設定が不要(他にホスティングしてくれる先を探す必要がない)。
  3. でもコピペとかBlogger特有の自動改行処理にはオンライン処理があればイイネ。
    これには閲覧者の計算機資源が必要ですがハイライト処理を行うよりはるかに軽量、かつ高速です。
とまあ、こういうテーマでこれまでの回でお話ししてまいりました。
で、そのテーマに沿って無意味なコードと駄文を書き連ねてまいりましたが、さすがにそろそろもう〆です。

気の早いお兄さんお姉さん向けに先にリンクしたオンラインデモの使い方をご説明します。

以前にもざっとご説明しましたが、実際にモノを見ながらお読みいただくとより一層わかりやすいかと思いますので箇条書きで手順をご説明いたします。
  1. スタイルを選択します。
    デフォルトはDjangoになっていますので、適宜変更してください。
    これは使用するスタイルシートを選択することと同義です。(ハイライト用スタイル欄に選択したスタイルシートがそのまま出てきます)
    Djangoについては行毎に色が変わるような改変をcssに加えてあります。
    他のCSSもカスタマイズしたい場合はローカル環境での作業の方法をこちらにてご説明しております。
    htmlファイルはデモページのhtmlを保存すればそのままご利用いただけます。
  2. 言語(ブラシ)を選択します。
    デフォルトはC++になっていますので、適宜変更してください。
  3. SyntaxHighlighterオプションを設定します。
    1. html-script
      phpやjavascriptなど、htmlと親和性の高い言語の場合htmlマークアップが出てくる場合が多いですが、それも同時に色付けします。
      他の大抵の言語では、このオプションをチェックすると怒られます。
    2. Blogger mode
      ソース中に存在する<br />が消えるなど、不可解な挙動をして愉しいので残しています。
      実際には、ここBlogger向けテキストを生成する際にもチェックする必要はありません
    3. auto-links
      チェックするとurlを自動でaタグで括ってくれます。
    4. 行番号
      行番号表示の有無です。チェックを外すと行番号が生成されません。
    5. TABサイズ
      \tの展開サイズです。時々[敬虔|狂信的]な[タブ排他|ホワイトスペース原理]主義者に出会いますが、何が彼らをそうさせたのでしょうか。tab便利です。
      このように幅をいつでも変えることができますもの。何はなくとも起き抜けで:set tabstop=4ですわよ奥様。
    6. その他の追加属性
      first-line: や highlight: など、さらに細かい設定を行います。各項目はホワイトスペース(全角を使う人がいるからこの世界やめられないよね)で区切ります。
      まあ、有体に言えばナマでSyntaxHighlighterで使う際にclassに指定する文字列ってことです。
    7. Bloggerで生成モードで更新してしまって表示が崩れた場合のお助け処理を追加※
      Bloggerで作成モードとhtmlモードを往来する場合に整形済みテキストが崩れますが、再整形するスクリプトを追加します。
      詳細はひとつ前の記事をご参照ください。
    8. 「ダブルクリックでコピーモードに遷移」機能の再追加※
      コードをダブルクリックすると全選択されて簡単にコピーできるモードに遷移できるようにスクリプトを追加します。
      詳細はひとつ前の記事をご参照ください。
    9. 整形済みhtmlに付与してかまいません。同一関数名の関数は最後に読み込まれた関数で上書きされるだけなのでエラーにはなりませんし、Bloggerのように表示モードによる記事ごとの表示順とか月またぎによる表示の有無とかを考えるより、各ブログ記事においとけばいいと思います。小さいですし。
  4. 上記を設定したら、いよいよ変換元テキスト入力欄:にハイライト元ソースを原本よりコピーしてください。
  5. ハイライト実行ボタンを押してください。
  6. 上記を行うと、箱が2つ現れます。
    ハイライト用スタイル、および、ハイライト済テキストです。
    1. ハイライト用スタイル
       スタイルは、単にラジオボタンで選択したスタイルのcssファイルの内容をhead部やbody部に直接コピペできるようにしたものです。
      これは本文中にいくつもハイライト済みテキストを配置する場合でも、1回だけで構いません。
      つまり、ハイライト済みテキストと1対1で対応していません。htmlモードの先頭にコピーしておけばいいです。
    2. ハイライト済みテキスト
      これこそハイライトされた結果をhtml化した本命です。
      これをブログ中の最適な位置に適宜ペーストしてください。
      htmlテキストなのですから作成モードで貼り付けて所期の効果が得られず七転八倒するような暇のつぶし方はあまりお勧めしません。
      htmlモードで張り付てください
      前述の通り、オプションによっては末尾にjavascriptが付与されておりますので、作成モードに戻って編集する際にスクリプトを消してしまわないよう注意して下さい(Bloggerさんは編集の具合で簡単にscriptタグを消してくれるので、ペーストしたすぐ後の行を編集する場合は要注意です。scriptタグが消えると当然イベントハンドラの追加や改行除去処理は行われません)。
  7. ハイライト処理済みhtml版プレビュー
    あなたのブログ上でどう見えるかをプレビューできます。
    javascriptが絡むオプションを指定した場合の挙動の確認もここで行います(Blogger用改行除去のデモは用意していませんので現状ではダブルクリック時の挙動をご確認いただけます)。まあ、除去デモを用意しても一瞬で終わってるので見えませんが。
現状、こんなところです。
文字にするとむやみに長いですねえ。

え?画像付きじゃないとわからない?
そりゃお気の毒です。

以上です。

サーバいらず版SyntaxHighlighterでもっと工夫を - 全選択機能の復活とBlogger固有の問題への対策

もうちょっとSyntaxHighlighterネタを引っ張ってみたいと思います。

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>&nbsp;</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という関数で、shCore.js内にあるのですが、scripts/shCore.js版はパックされているため外部から呼べないので、src/shCore.jsのほうからイベントハンドラ関連を抽出してきます。
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>&lt;style type=&quot;text/css&quot;&gt;のようなタグで囲って</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>
なお、パックされているjavascriptの原本は以下です(PACKED_LIB変数に代入されている謎の文字列がコレです)。

例の強制改行除去+空行再追加とイベントハンドラの再設定、およびイベントハンドラを構成する関数をまとめたものです。

面白いのは、コメント中にあるアポストロフィの数が合わないもんだからハイライトが途中でおかしくなっています。

まあ、そこまでやってらんねーんでしょうね。

パックには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>&nbsp;</div");
  //空行は<div class="line number9 index8 alt2">&nbsp;</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);
  }
};

今度こそ以上です。