11

シンタックスハイライトであるRainbowに行番号のサポートを追加する作業をしていますが、行番号をコピーできないようにする方法がわかりません。

を介して選択を無効にuser-select: none;すると、要素は強調表示されなくなりますが、その周囲を強調表示してからコピーすることでテキストをコピーできます。これにより、コードとともに行番号がコピーされます。

問題の実際の例を次に示します。http：//jsfiddle.net/CjJLv/8/

どんな助けでもいただければ幸いです。ありがとう！

4

4 に答える 4

6

さて、準拠したブラウザで最も簡単な方法であり、残念ながら信頼性の低いクロスブラウザは、生成されたコンテンツを使用することです（indexプラグインのテキストコンテンツに追加されていたさまざまな部分を削除し、次を使用しました（ CSSの最後に）コピーできないテキストを実装するには：

table.rainbow {
    counter-reset: line;
}

table.rainbow tbody tr td:first-child {
    counter-increment: line;
}

table.rainbow tr td:first-child::before {
    content: counter(line);
}

JSフィドルデモ。

ただし、これにはかなり大きな欠陥があります（クロスブラウザの非フレンドリーなアプローチが最大です）ので、もっと良いものを試してみます...

于 2012-08-20T23:14:39.953 に答える
1

通常のリストを追加するだけです。

if (window.Rainbow) window.Rainbow.linecount = (function(Rainbow) {
    Rainbow.onHighlight(function(block) {
        var lines = $(block).text().split('\n');
        var $lines = $('<ul class="lines"/>');
        for (var i = 0, len = lines.length; i < len; i++) {
            $lines.append('<li class="line"'+ i +'>'+ i +'</li>');
        }
        $(block).before($lines);
    });
})(window.Rainbow);​

そしてCSS：

.lines {
    float: left;
    padding-right: 1.5em;
    padding-left: .5em;
}

したがって、注意深く強調表示すれば、コードだけを選択できるようになりました。

デモ： http： //jsfiddle.net/elclanrs/CjJLv/18/

于 2012-08-20T23:22:23.637 に答える
1

デビッドトーマスの答えは、行番号に最適です。より一般的には、コピーしたくない他のテキストがある場合は、それを生成コンテンツとして持つことができます。

<style>#uniqueid::before { content: 'TEXT GOES HERE'; }</style>
<span id="uniqueid"></span>

ただし、CSSにテキストを埋め込む必要があるのは醜いので、CSSを使用してこれを改良attr()し、HTMLの属性からテキストを読み取ることができます（pimvdbで提案されています）。

<style>[data-nocopy]::before { content: attr(data-nocopy); }</style>
<span data-nocopy="TEXT GOES HERE"></span>
<span data-nocopy="AND HERE"></span>

デモ： http： //jsbin.com/fob/1/edit

これは、生成されたコンテンツを選択する際の21歳（！）のバグにより、Firefox、Safari、およびChromeで機能します。

ただし、古いIE（<8）では、テキストは完全に非表示になります。新しいIEでは表示されるはずですが、コピーできる可能性があります。これらのバグはいつか修正される可能性があるため、通常、この手法を重要なものには使用しないでください...

また、これは非常にユーザーに敵対的である可能性があるため、慎重に使用してください。

于 2014-02-19T15:05:59.657 に答える
0

各行番号を<img>sのシーケンスとして表示できます。

于 2012-08-20T22:54:42.487 に答える