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

现在，如果你仔细彰显，你可以只选择代码。

演示： http://jsfiddle.net/elclanrs/CjJLv/18/

Answer 3

您可以将每个行号显示为<img> s。

的序列

Answer 4

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

这适用于Firefox，Chrome和Safari，因为在选择生成的内容方面存在长期存在的错误：

但是在旧IE（＆lt; 8）中，文本将完全不可见;在较新的IE中，它应该是可见的，但可能是可复制的。一般情况下，不要将此技术用于任何关键的事情，因为这些错误可能会在一天内得到修复......

使行号不可复制

4 个答案: