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

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

<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、Safari 和 Chrome，因为在选择生成的内容时存在 21 年的（！）错误：

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

并谨慎使用，因为这可能对用户非常不利。

于 2014-02-19T15:05:59.657 回答
0

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

于 2012-08-20T22:54:42.487 回答