みんな大好きSyntaxHighlighter。バージョン2とバージョン3がありますが今回はバージョン3のお話。 そもそも、このSyntaxHighlighterにコピペ専用のモードがある事をご存知ですか。そのままマウスでドラッグしてコピペすると、行数も一緒にコピペされてしまいます。 バージョン2であればツールバーのソースを表示ボタンが使えますがバージョン3ではそれが無い。
実はバージョン3では、コードをダブルクリックするとコピペモードになる。しかも自動で選択されている状態だから、後はCtrl+Cを押すだけ。 バージョン2より便利だと思うんだけど、そもそも知られてないんじゃないかなあこの機能。
で、問題はここからな訳でここでコピペしたコードは動かない。思いっきりエラーが出ます。 それは何故かと言うと、コードが勝手に改行されたり連続したスペースが一つになったりするのを防ぐために、コードの半角スペースが ノーブレークスペースに置き換えられてるんだけど、それがそのままコピーされてる。 半角スペースとノーブレークスペースは別の文字だから、エラーが出る訳。 サンプルを貼ろうと思ったけどこのブログでは対策済みだから逆に無理。
ではその解決方法。 ダブルクリックした時、テキストエリアを作ってそれに置き換えています。その時にノーブレークスペースを半角スペースに置き換えれば良い。 というわけで以下の部分をカスタマイズ
h = h.join("r");
h = h.split("u00a0").join("u0020");
c.appendChild(document.createTextNode(h));
一行でオッケー。ダブルクリックして使ってね！ ノーブレークスペースが全部半角スペースになるから、あえてノーブレークスペースを使おうって人は逆に出来ません。SyntaxHighlighterに渡す前の生タグでは区別されてるからどうにかなりそうだけど、そこまでやる気はない。
と言うかバージョン3が2の後方互換じゃないのが問題だ。折り返し、ツールバーはバージョン2のみだけど、上の画像の通り出来ない理由無いだろ。 そもそもバージョン3のgithubも2 years agoで全然更新されてないし、html5対応してるのかな。
