Adding line numbers that don't show in copied text [#393500]

I think it makes things quite difficult for users to have to copy text that has a bunch of pound signs in it.

Currently, if line numbers are enabled then copying text from the code box places a pound sign (#) on each line where the line number would have resided. I request that this be changed so that copying the text does not show the line numbers. Using the loop you are doing for adding the <li> tags to each line of the code you could instead add <span> tags to each line with a class defined to specify the line number, such as <span class="1"> then add some css like span.1:before {content:"1. "}

So the resulting code would look something like:

<style type="text/css">
  div.geshifilter span.1:before {content:"1. "}
  div.geshifilter span.2:before {content:"2. "}
  div.geshifilter span.3:before {content:"3. "}
  div.geshifilter span.4:before {content:"4. "}
  div.geshifilter span.5:before {content:"5. "}
</style>

<div class="geshifilter">
  <pre class="geshifilter-javascript">
    <span class="1" style="font-family: monospace; font-weight: normal;">CODE_FROM_LINE_1</span>
    <span class="2" style="font-family: monospace; font-weight: normal;">CODE_FROM_LINE_2</span>
    <span class="3" style="font-family: monospace; font-weight: normal;">CODE_FROM_LINE_3</span>
    <span class="4" style="font-family: monospace; font-weight: normal;">CODE_FROM_LINE_4</span>
    <span class="5" style="font-family: monospace; font-weight: normal;">CODE_FROM_LINE_5</span>
  </pre>
</div>

In turn, the line numbers would not copy when copying the text from the code box.

Comments

Comment #1

soxofaan commented 6 March 2009 at 23:23

Status:

Active

» Closed (works as designed)

the <li> stuff is done by the GeSHi library,
the GeSHi filter module is just a wrapper around that library and its features.

Moreover, I think your solution with CSS is not very scalable as it requires a dedicated CSS rule for every possible line number.

Comment #2

nicholas.alipaz commented 7 March 2009 at 00:00

ok, well thanks for reading anyhow. Still a big bother to me that I can't enable the line numbers on my site since we do a lot of copy/paste. I will have to look into a solution.

Comment #3

nicholas.alipaz commented 7 March 2009 at 20:32

Well, I have posted in Geshi forum on sourceforge regarding this. I also reworked my idea and came up with this:

One could add to the stylesheet something like:

div.javascript i{counter-increment: lnumber;display:block;}
div.javascript i:before{content: counter(lnumber) ". ";}

Then change the output of the line numbered format to be pretty much identical to that of no line numbers. One exception, add <i> tags around each line. You could really use any tag you feel appropriate, that is just what I used in my testing.

Like:

<div class="javascript" style="...">
<i><span class="co1">// Testing</span></i><br>
&nbsp; <i><span class="kw3">alert</span><span class="br0">(</span><span class="st0">"hello world!"</span><span class="br0">)</span><span class="sy0">;</span></i>
</div>