Implementing line numbers on the left side of the code editor in schelp files

Development
1

Dear developers,

According to the following webpage:

I made a “custom.css” file in the “HelpSource” folder inside SuperCollider’s resource folder as follows:

code, pre {
white-space: pre-wrap; 
word-break: break-word; 
text-align: left; 
counter-reset: line 1;}

pre>span::before {
  content: '1';
  display: inline-block;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
}

pre div {
  line-height: 1.5rem;
  counter-increment: line 1;
}

pre div::before {
  content: counter(line);
  display: inline-block;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
}

pre {
    border-left: 2px solid #e0e0e0;
    padding-left: 0.5em; ;
}

However, the line numbers are not counted, and number 1 repeats as follows:

Screenshot 2022-06-05 at 8.40.28 AM
Screenshot 2022-06-05 at 8.40.28 AM1752×452 24 KB

One more problem is that the line numbers seem to be included when selecting text across lines even though they are excluded when copying and pasting.

How could I resolve these two problems?

And… would it be not helpful if this feature were implemented in the SC document files’ code editor? Sorry for always suggesting something that I could not accomplish by myself.

2

Maybe I misunderstand what you try to accomplish but scide already has line numbers.
You can enable them via the “View” menu and then toggle “show line numbers”.

Edit: I guess you meant line numbers inside code fragments in the documentation instead?

3

Yes! Sorry for the obscure writing.
It seems to be managed using the following files in the SC resource folder:

  • codemirror.css
  • editor.js

I have found some code that enables showing the line number when the line exceeds some lines after opening this thread, but I cannot integrate it with the resource folder.

4

I found a way to implement it and made a PR: