ajaxorg / ace

Ace (Ajax.org Cloud9 Editor)
https://ace.c9.io
Other
26.75k stars 5.28k forks source link

Ability to apply range on scrollbar #4556

Closed undergroundwires closed 2 years ago

undergroundwires commented 3 years ago

I wonder if it's possible to add native support for highlighting/indicating/marking lines on scrollbar? If not, would you recommend a nice way to achieve it?

Example showing how it's done in Visual Studio Code: image

Thank you for the awesome project. I've been happily using it in privacy.sexy for a while now.

nightwing commented 2 years ago

This was implemented by https://github.com/ajaxorg/ace/pull/4905 which have added customScrollbar option, please let us know if it does what you need.

undergroundwires commented 1 year ago

Hi @nightwing , thank you for the information. I've checked the PR but still have hardtime understanding how I can highlight range of lines. It's very straightforward to add a marker:

editor.session.addMarker(
        new AceRange(startRow, 0, endRow, 0),
        'code-area__highlight',
        'fullLine',
      );

And I can highlight like this:

  background-color: $color-secondary-light;
  position: absolute;

But how can I get line number based highlighting of a range just like this? I see no examples or no documentation. I'd appreciate any guide.

My code: https://github.com/undergroundwires/privacy.sexy/blob/bab6316e7625230cf4a4cf67c3aca417347db75c/src/presentation/components/Code/TheCodeArea.vue#L116-L123