7cc@はてなブログ

JavaScriptとかとか

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では見た目通りにコピーされる。これは

  1. 連続する\u0020を\u00A0に置き換え
  2. 改行のみの行にbrを追加

と工夫しているから。gistはこれと同じようにDOM改変することでも対処できるが、google-code-prettifyの先頭に空白が付くのが対処できない。

ちなみに上記スクリプトのソースを各サイト側で設置しても良い。msMatchesSelectorも追加すればIE9以上もタブン対応する。