Javascript 使行号不可压缩

我正在为一个语法高亮器添加行号支持，但我不知道如何使行号不可压缩

通过

用户选择禁用选择：无使元素不可高亮显示，但仍然可以通过在其周围高亮显示然后复制来复制其文本，这最终会将行号与代码一起复制

以下是该问题的工作示例：

任何帮助都将不胜感激。谢谢
 您可以将每个行号显示为一个序列。
好的，兼容浏览器中最简单的方法，不幸的是，不可靠的跨浏览器方法是使用生成的内容（我已经删除了插件中将
索引
添加到文本内容中的各个部分，并使用了以下内容（在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);
}


不过，这确实有一些相当大的缺陷（跨浏览器不友好的方法是最大的），因此我将尝试更好的方法…
我只想添加一个常规列表

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);​

因此，如果您仔细突出显示，现在可以只选择代码

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

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

演示：

这适用于Firefox、Safari和Chrome，因为21岁的人在选择生成的内容时出现了（！）错误：

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






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

并且要谨慎使用，因为这可能会对用户非常不利。
我建议使用一种方法，而不是表格布局。因此，您有一个带有行nr和一个div的表格。如果行号向左浮动，代码向右移动，您甚至无法选择它们。如果有解决方案，它会工作得更好。@Tessmore:您能做一个
ha吗我有两列可以根据内容进行缩放吗？我最初有一个
布局，但不可能在一列中均匀地对齐行号。我还尝试保持换行功能，这就是为什么我认为表格布局最合适的原因。如果你给它相同的字体/行高属性，它们没有进入
，但这是有意义的，因为你使用css生成行nr，然后谷歌不必为你的数字编制索引，只需要代码。（我不是说你应该把代码放在
中，因为你会遇到同样的问题，但我点击得太快了）大多数支持行号的语法高亮显示程序提供了一个链接，允许您只复制文本，而不复制行号或任何其他格式。@Blender我很想看到
失败的结果；这一直是我发现的创建不可选择行号的最佳方法。我找到了一个用于Rain的在长
对象上绘制行号的弓，以防止复制/粘贴，但我选择布局的原因是通过CSS样式允许更大的灵活性。
标记也有同样的限制，因此我无法真正使用它们。这实际上与我以前的设计非常相似（这基本上就是GitHub在语法突出显示方面所做的）。这种方法的问题是它不允许换行，这是我想保留的：嗯……我明白了。我想也许你可以从剪贴板上剪下数字，但剪贴板不是跨浏览器的，可能有问题。在任何情况下，你都可以添加一个水平滚动条，丑陋但快速有效。我同意值得庆幸的是，没有任何CSS3属性可以阻止浏览器将文本复制到剪贴板。如果我的方法太复杂，我想我只能忍受一个水平滚动条。谢谢！我想这和不可选择文本的效果差不多。如果浏览器不支持
：bef，我会回到我以前的方法ore
，它应该考虑IE和其他浏览器的旧版本。也许你可以在CSS中为旧浏览器使用
attr（）
。根据MDN，甚至IE8也支持它（承认我自己没有测试过）。@pimvdb:考虑到支持它的浏览器数量，我认为
attr（）
方法是最干净的。
<style>[data-nocopy]::before { content: attr(data-nocopy); }</style>
<span data-nocopy="TEXT GOES HERE"></span>
<span data-nocopy="AND HERE"></span>