Clever Geek Handbook

行番号を付けずにソースコードをコピーする



情報を出力するとき、より良い知覚のためにそれを装飾する必要があります。多くの場合、デザインにはテキストも添付されます。 この情報を選択してコピーする場合、デザインをコピーする必要はありません。 情報のみが必要であり、できれば元の形式であることが望ましい。 つまり、コピーするときに、選択したテキストの一部がクリップボードに移動しないようにします。

私の場合、これはソースコードであり、行番号が付けられているため、より明確であり、コード行を参照する機能があります。 ただし、コードの一部をコピーする場合は、行番号なしでコピーする必要があります。

多くの蛍光ペンは、コードをコピーするとき、行番号もコピーします。 状況から抜け出す方法は異なります：番号付けが行と一致しない可能性のあるcなレイアウトを使用するか（たとえば、githubで確認できます）、別のウィンドウにフォーマットせずにコードを表示する特別なボタンを使用します。 これらのアプローチは私には不満に思えたので、別の解決策を見つけることにしました。

この記事では、私がついに思いついた解決策について説明します。 もちろん、解決策はプライベートですが、誰かが自分の問題を解決するのに役立つかもしれません。



まず、考えられる解決策を簡単に説明します。



最初の方法は明らかです。



最も単純で最も明白な方法は、リストの各要素が個別の行である番号付きリストを作成することです。 このアプローチの主な利点は、すべてが単純であり、番号付けについて考える必要すらないことです。 ただし、同時に、番号付け形式を制御したり、マーカー（行番号）を配置したり、通常は何らかの方法で装飾することはできません。 さらに、Internet ExplorerおよびFirefoxは、マーカーとともにテキストをコピーします。

コピーに関する実際の問題は、このアプローチを使用する可能性を取り消します。



2番目の方法、あまり明白ではありません。



2番目に思い浮かぶのは、生成されたコンテンツを使用することです。 古いIEではこれが機能しないという事実に耐えることさえできます（この場合、もちろんフォールバックを行うことができます）。 しかし問題は、Internet ExplorerとOperaが生成されたコンテンツを含むすべての表示テキストをコピーすることです。

Internet Explorer / Operaの開発者が正しいのか、webkitとFirefoxの開発者が生成されたコンテンツをコピーするのが正しいのかを判断するのは困難です。 確かなことは、この方法は適切ではないということです。



小さな発言



WebkitおよびFirefoxは、ユーザー選択（接頭辞-webkit-user-selectおよび-moz-user-select）などのCSSプロパティをサポートします。これは、テキストが選択されないようにするために使用できます。 Internet Explorerには、選択できないhtml属性があります。 ただし、これはすべて選択プロセスの開始を防止するだけです。つまり、テキストがまだ選択領域に収まっている場合はコピーされます。

さらに、選択領域に落ちたすべてのブロックは、非表示（表示：なし;または可視性：隠し;）でさえ、クリップボードにも表示されます。

コピーするテキストとコピーしないテキストを決定する通常の方法がないため、これは非常に悲しいことです。



3番目の方法は、異常です。



<input>を使用して装飾テキストを表示することを提案する解決策を求めてインターネットをさまよう。 はい、はい、テキスト出力用の入力フィールド。 必要なテキストを値に書き込み、パディング、マージン、境界線、背景を削除し、残りのスタイルを設定します-これが入力であると言う人はいません。 テキストを選択し、コピーしてノートブックに貼り付けます。すべてのブラウザーは同じように動作し、コンテンツのある<input>タグは挿入されません。

不快な瞬間を克服するために残っており、入力フィールドにフォーカスを当てることができ、番号を付けてテキストの選択を開始することはできません-フィールドのテキストが強調表示されます。 しかし、これは実際には些細なことです。

Webkitでマウスを使用してフィールドにフォーカスを移動することは不可能であり、Firefoxは素晴らしいことです。これはCSSプロパティpointer-eventsであり、noneに設定できます。 Internet Explorerの場合、フィールドにunselectable = "on"属性を追加できます。 Operaにはまだ方法がありません。

キーボードから（および他の方法で）フォーカスを防ぐには、<input>にreadonlyおよびtabindex = "-1"属性を追加します。

Firefoxおよびwebkitではすべて問題ありませんが、Internet Explorerでは番号付け領域から選択を開始することはできません。Operaでは、ソースコードではなくフィールドのテキストが引き続き強調表示されます。 この問題を解決するには、各<input>に、<input>とオーバーラップする追加のブロックを追加します。 このブロックは、<input>と同じサイズで、透明である必要があります。 残念ながら（または幸いなことに）ブロックに背景がない場合、ブロックは「撮影」されます。つまり、ブロックは存在しないかのように動作するため、背景を追加する必要があります。 透明なgifファイルまたは存在しないファイルへのパスのいずれか、たとえばbackgroundを追加できます：url（＃）; （rgba（）を使用できますが、IEではバージョン9以降でのみサポートされます）。



それは基本的にそれです。



その結果、ソースコード付きのブロックに次のhtmlがあります（明確にするためにラインフィード、ターゲットhtmlにはそれらがない必要があります。 

<div class="code"> <div class="line"> <span class="lineContent"> <input class="lineNumber" value="01" unselectable="on" readonly tabindex="-1" /> <span class="over"></span> ..  .. </span> </div> <div class="line"> ... </div> ... </div>


そして、このさのためのCSS： 

  .code { border: 1px solid #E0E0E0; padding: 1px; margin: 0 1ex; overflow: hidden; font-family: Consolas, monospace; font-size: 100%; color: black; line-height: 1.4em; white-space: pre; /*     */ } .line { position: relative; /*  webkit,              */ zoom: 1; /*  IE6/7 */ white-space: pre; /*      IE7 */ } .even { background: #F8F8F8; } .odd { background: #F0F0F0; } .lineNumber { display: block; position: absolute; left: 0; padding: 0 .5ex; margin: 0; width: 6ex; line-height: 1.4em; height: 1.4em; background: none; border: none; font-family: Consolas, monospace; font-size: 100%; text-align: right; color: #666; -moz-user-select: none; /*  user-select  Firefox & webkit,       */ -webkit-user-select: none; user-select: none; pointer-events: none; /*       .over,       Firefox & webkit */ } .over { display: block; position: absolute; left: 0; width: 7ex; height: 1.4em; z-index: 1; background: url(.); /*  IE  Opera,    "" (    ) */ } .lineContent { margin-left: 7ex; padding-left: 2ex; border-left: 2px solid #33BB66; display: block; white-space: pre-wrap; /*  ,       */ } .token-string { color: blue; } .token-comment { color: #008200; } .token-keyword { color: #006699; font-weight: bold; }




デモ



atomjsソースコードの例を使用したデモ （ TheShockが気にしないことを願っています;）

HTMLコードはたくさんありますが、javascript（独自の蛍光ペン）によって生成されます。

Chrome / Safari、Firefox 3.6、Opera 11、IE7-9（IE9 RCでモードを切り替える）でテスト済み。



注意すべきこと





私は改善のためのコメントや提案を喜んでいます。



更新

Workaroudが見つかったため、Word / Excelに貼り付けるときに入力フィールドが挿入されません。 これを実現するには、<input>に対して、type属性の存在しない値を設定する必要があります。 この場合、ブラウザーは属性を無視し、フィールドにはデフォルトのタイプ、つまりtype = "text"があります。コピー（または貼り付け）を行うと、スクリプトは不明なタイプのフィールドの処理方法を説明しません。その結果、フィールドは無視されます。 したがって、たとえばWordにコードを安全に挿入できます。 さらに、コードがChrome / SafariまたはIEからコピーされる場合、色付きで貼り付けられます（Webkitも背景をコピーし、IEは背景なしでコピーします）。


More articles:


All Articles