使行号不可复制 [英] Making line numbers uncopyable

问题描述

我正在为 Rainbow （语法荧光笔）添加行号支持，但我无法弄清楚如何

I'm working on adding line number support to Rainbow, a syntax highlighter, but I can't figure out how to make the line numbers uncopyable.

通过用户选择：无; 禁用选择使元素不可高亮，但是

Disabling selection via user-select: none; makes an element unhighlightable, but you can still copy its text by highlighting around it and then copying, which ends up copying the line numbers along with code.

这是一个工作的问题示例：

Here is a working example of the problem: http://jsfiddle.net/CjJLv/8/

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

Any help would be appreciated. Thanks!

推荐答案

好的，兼容浏览器中最简单的方法，可悲的是，不可靠的跨浏览器，内容（我删除了 index 被添加到插件中的文本内容的各个部分，并使用以下（在CSS的末尾）实现不可复制的文字：

Okay, the easiest way in compliant browsers, and, sadly, not reliable cross-browser, is to use generated content (I've removed the various parts where index was being added to textual content in the plug-in, and used the following (at the end of the CSS) to implement un-copyable text:

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 。

虽然，有一些相当大的缺陷（跨浏览器不友好的方法是最大的），所以我会尝试更好的东西...

This does, though, have some rather large flaws (the cross-browser unfriendly approach being the biggest), so I'll try for something better...

这篇关于使行号不可复制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！