Ace editor: customizing syntax error gutter

Question

Just wondering, if the syntax error gutter can be customized? Also is it possible to highlight texts which has syntax error?

For example below I am trying to check value of myString against string a "chetan" but without quotes. Now this is a syntax error. Currently we display the error in gutter prior to line number. But is it possible to customize the ace editor provide inline highlight and change the color?

if myString==chetan:
  //do something
endif 

Answer 1

You can add underline similar to the way cloud9 and zed do (see https://github.com/zedapp/zed/commit/59ae66c545db2ad92dc5efc1a069edd16960ebdd) or modify highlighter tokens see https://groups.google.com/d/msg/ace-discuss/_PRUJ_HemNo/wvDf9FqwzhMJ

Answer 2

I discovered that the line that has an error does not have spans, so I did the following:

if( editor.getValue() != "" && $('.ace_text-layer.ace_line:not(:has(span))')){
  $('.ace_line:not(:has(span))').css("background","#FCBEA5")
}else {
  $('.ace_line:not(:has(span))').css("background","#000000")
}

There are a few issues with this, such as it highlighting the current line.

Answer 3

To customize the gutter you can play around its .ace_gutter properties. Now suppose if you want to change the width of the gutter,

.ace_gutter > .ace_layer {
    width: 20px !important;
}

This will help you in changing the width of the gutter by overriding the present gutter width. Similarly, you can edit other properties too.