使行号不可计数

Making line numbers uncopyable

本文关键字：可计数      更新时间：2023-09-26

我正在为Rainbow这个语法高亮器添加行号支持，但我不知道如何使行号不可编辑。

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

以下是该问题的一个工作示例：http://jsfiddle.net/CjJLv/8/

如有任何帮助，我们将不胜感激。谢谢

好吧，在兼容的浏览器中，最简单的方法是使用生成的内容（遗憾的是，跨浏览器不可靠）（我已经删除了插件中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演示。

不过，这确实有一些相当大的缺陷（对跨浏览器不友好的方法是最大的），所以我会尝试更好的方法。。。

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

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/

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岁的（！）错误导致选择生成的内容：

  • 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中，它应该是可见的，但很可能是可复制的。一般来说，不要将这种技术用于任何关键的事情，因为这些错误可能有一天会得到修复。。。

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

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

相关文章：