How can I highlight an individual line in Ace?

[Harry P]

cf the question below from a skywriter user - We'd also be interested
in highlighting single lines in the editor (to show errors we've
detected in user-submitted code).

We know the line number, and we'd like to be able to specify a CSS
class and some mouse-over help text.

Is there any way of doing this, eg editor.highlightline(lineNo,
message)?

We've looked into editor.renderer.addMarker(range, klass, type) but
it doesn't seem to highlight the right lines?

thanks!
Harry
--
Harry Percival
Developer
ha...@resolversystems.com
+44 (0) 20 3051 2751

Dirigible: a Python cloud spreadsheet
<http://projectdirigible.com/>




bmc wrote:
> I've been doing quite a bit with skywriter and I think I am really
> close to getting it to do *everything* I need but am stuck on one last
> part.
>
> Is it possible to programmaticly highlight/change the foreground/
> background color or a line (or even a range)?
>
> Basically what I need to do is send the text from the editor server
> side, the server side will analyze it and return some info to the
> client - the info would be which line #'s have errors and some info on
> those errors. I know I can do this with syntax highlighting but that
> requires me to write a bunch of regex stmts to do the parsing in
> javascript.
>
> The best comparison to what I want would be a compiler - what if I
> wanted a "compile" button - that sent the code to the server, then the
> server reports compile time errors back and highlights the issues in
> the editor. Is it possible to perform this type of editor style
> manipulation?
>
> Thanks for all the support so far,
>
> ~Brendan

[Fabian Jakobs]

Hi Harry,

> cf the question below from a skywriter user - We'd also be interested
> in highlighting single lines in the editor (to show errors we've
> detected in user-submitted code).
>
> We know the line number, and we'd like to be able to specify a CSS
> class and some mouse-over help text.
>
> Is there any way of doing this, eg editor.highlightline(lineNo,
> message)?

There is a fairly new API to add line annotations, which I use to
display syntax errors and lint warnings:

editor.getSession().setAnnotations([{
row: 1,
column: 10,
text: "Strange error"
type: "error" // also warning and information
}]);

Right now it will only set a class in the gutter and by default it
will display an error or warning icon. I plan to also highlight the
line in the editor. Maybe this is already enough for you.

> We've looked into editor.renderer.addMarker(range, klass, type)  but

This should also work and we use it e.g. in the Cloud9 debugger to
highlight the active line.

var markerId = editor.renderer.addMarker(new Range(1, 10, 1, 15),
"warning", "text");

This would highlight line 2 (all zero based) column 9-14 by putting a
div with the CSS class "warning" below the text. If you want to
highlight the full line you have to do:

var markerId = editor.renderer.addMarker(new Range(1, 0, 2, 0),
"warning", "line");

When using this approach you have to be aware that the marker is not
stored in the edit session so when you change the edit session you
have to remove or reset the markers manually. You have to keep track
of the markers yourself.

Hope this helps,

Fabian

> --
> You received this message because you are subscribed to the Google Groups "Ajax.org Cloud9 Editor (Ace)" group.
> To post to this group, send email to ace-d...@googlegroups.com.
> To unsubscribe from this group, send email to ace-discuss...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/ace-discuss?hl=en.
>
>

[Patrick Fay]

Hi Fabian,

I am also wondering the best approach for highlighting a single line. I have tried the following,

var markerId = editor.renderer.session.addMarker(new Range(8, 0, 9, 0), 'activeBreakpoint', 'line');

with inconsistent results. Some times only part of the line is highlighted, some times the incorrect line is highlighted. I noticed that you use the addMarker method on the renderer object, however I can only find this method on the session object, is this incorrect?

Thanks,

Paddy

[Harutyun Amirjanyan]

editor.session and renderer.session are the same and only session have a marker.
To highlight full line use

var Range = require("ace/range").Range editor.session.addMarker(new Range(8, 0, 8, 1), 'ace_highlight-marker', 'fullLine');

here instead of ace_highlight-marker any other css class can be used like

.ace_highlight-marker { position: absolute; /* without this positions will be erong */ background: #abc; /* color */ z-index: 1000; /* in front of all other markers */ }

[Iftekharuddin Mohammed]

wats the change in the editor after adding a marker to the ace editor?