Highlight current line

Feedback Feature Requests
1

It would be nice if the current line (where one is currently typing, where the blinking text cursor is displayed) could be marked with a colored background. Otherwise, it is only possible to color the entire block or frame it, but it is still unclear when trying to find the line where one is currently typing.
Question to the devs: It is possible to provide a new class so that we can use the custom.css to highlight the current line with a color we want?

2

Welcome.

Typing takes place inside a textarea and this is inside the editor family of classes. I think that this provides multiple options for targeting a css rule that styles the line currently typing into. You can:

  • open the inspector with Ctrl + Shift + i to see for yourself
  • if still lost:
    • apply there the desired style manually
    • share here a screenshot of it
    • let us provide you with a working css rule
3

Thank you, I have already used the Inspector. However, in the Inspector, I have expanded all text areas and could not find a class that only pertains to the current line. In this class, I would then input the background-color, for example. Since I haven’t found a class that deals with the current line, I have opened a new feature request. If you find a way to highlight the current line now, I would appreciate it.

4

Have you tried with .block-editor or .editor-inner or .editor-wrapper ?

5

Yes, I have. But then the entire block is colored. If the block has ten lines, all of these lines will be colored, and not just the current line where one is currently typing.

6
  • What do you mean by “ten lines”?
    • ten nested blocks
      • This seems to work, as only one block is being edited at a time.
    • ten lines within a textarea
      • Is it possible in HTML to target a line within a textarea?
    • other
      • Please specify.
  • Could you provide any helping screenshot?
    • Even if this is a valid feature request, a more detailed description would help.
7

Try this.

 div:is(#main-content-container,#right-sidebar) div.editor-wrapper:focus-within {
    outline: 2px double #0079fa;
    outline-offset: 0.1em;
    border-radius: 0.3em;
    z-index: 1;
  }

image
image925×127 1.49 KB

(It is also implemented in “Bullet Point Style” plugin.)