FirefoxでGistやgoogle-code-prettifyをコピーしたときのインデントを正常化する
Gistや行番号付きのgoogle-code-prettifyを使ったコード(Bootstrapのv2とか)をFirefoxでコピーすると、インデントが消えたりする問題が出る。これを直すuserscriptを書いた。
- Gist
- インデントが消える
- 改行のみの行に半角スペース
- google-code-prettify
- インデントが消える
- コードを全選択すると先頭に4つ空白が付く
原因
Firefoxではselectionにセットされる文字がコピー対象のテキストを含む最初のブロック要素によって決まる。preよりも先にdivやliがあると空白文字がpreのように処理されない。Google Chromeは要素に関係なく「どう見えているか」で決まる。この違いはcss white-space を指定すると分かりやすい。(Firefoxはそのうち修正されそうな気もするけど)
Githubでは見た目通りにコピーされる。これは
- 連続する\u0020を\u00A0に置き換え
- 改行のみの行にbrを追加
と工夫しているから。gistはこれと同じようにDOM改変することでも対処できるが、google-code-prettifyの先頭に空白が付くのが対処できない。
ちなみに上記スクリプトのソースを各サイト側で設置しても良い。msMatchesSelectorも追加すればIE9以上もタブン対応する。