Custom styling for specific ranges in editor

[bajrangCoder]

I have the ranges for the symbols(brackets) where I want to give custom color. But I can't find any api to do so ? Is there any api available for this purpose? I have seen marker api but that isn't usable in this case

[nightwing]

Are you trying to implement something like rainbow brackets of vscode? There is no api to set custom color but it is possible to change tokens, though the way to do it will depend on how you get ranges and how do you update them during editing.

[bajrangCoder]

Are you trying to implement something like rainbow brackets of vscode?

Yes something like that

I have row, column (ranges) of the symbols, Okay, how I can change that tokens things to achieve something similar. Is there any reference or example

[nightwing]

editor.session.bgTokenizer.lines[row] has a list of objects like {type: 'paren.rparen', value: ')'} you need to find the one you want add a class to it, and call editor.renderer.updateLines

e.g. you can try on https://ace.c9.io/

editor.session.bgTokenizer.lines[7][8].type+=".invalid"
editor.renderer.updateLines(7,7)

but depending on how you get the ranges, and how you update them during editing, you may need to optimize performance and handle the case when several brackets are in the same token.

[bajrangCoder]

Thanks @nightwing 👍

Just one more question: is it possible to give some custom Colors on those indent (vertical) lines , on both normal and active state. As I want to give same bracket color for those indent lines. Instead of default one.

[nightwing]

Indent guides are rendered in https://github.com/ajaxorg/ace/blob/master/src/layer/text.js#L436, What may complicate things is that most themse use background image to show dotted lines, so adding colored version could be a bit hard
https://github.com/ajaxorg/ace/blob/master/src/theme/textmate-css.js#L152-L158

[bajrangCoder]

Ohh, i think if somehow I'll get that indent guide element then I can replace it's styling by setting my own custom css classes which will add similar background image something like this but this will be colored line:

background-image: linear-gradient(to right, ${color} 2px, transparent 2px) !important;
opacity: 1 !important;

I'll check that indent guide rendering reference that you have shared

[nightwing]

you can get the elements with

editor.renderer.$textLayer.$lines.cells.forEach(function(c) {
    console.log(c.row, c.element.childNodes[0]?.classList?.contains("ace_indent-guide"))
})

Btw is this extension you are building open source? I think we had a feature request for this some time ago.