使行号不可复制

Question

我正在为Rainbow（语法突出显示工具添加行号支持，但是我不知道如何使行号不可复制。

通过user-select: none;禁用选择使元素不可突出显示，但是您仍然可以通过突出显示元素然后复制来复制其文本，最终复制行号和代码。

这里是问题的有效示例：http://jsfiddle.net/CjJLv/8/

任何帮助将不胜感激。谢谢！

Answer 1

[好的，这是兼容浏览器中最简单的方法，并且不幸的是，它不是可靠的跨浏览器，而是使用生成的内容（我删除了将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 Fiddle demo。

尽管这样做确实存在一些较大的缺陷（跨浏览器不友好的方法是最大的缺陷，所以我会尝试更好的方法...

Answer 2

我只想添加一个常规列表。

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;
}

因此，如果您仔细突出显示，则现在只能选择代码。

Demo： http://jsfiddle.net/elclanrs/CjJLv/18/

Answer 3

David Thomas的answer非常适合行号。一般来说，如果您不想复制其他文本，可以将其作为生成的内容：

<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中有效：

• https://bugzilla.mozilla.org/show_bug.cgi?id=12460
• https://bugs.webkit.org/show_bug.cgi?id=7562
• https://bugs.chromium.org/p/chromium/issues/detail?id=80466

但是在旧版IE（<8）中，文本将完全不可见；在较新的IE中，它应该是可见的，但很可能是可复制的。通常，不要将这种技术用于任何重要的事情，因为这些错误有一天可能会得到修复...

并且要谨慎使用，因为这可能会非常敌视用户。

Answer 4

您可以将每个行号显示为<img>的序列。