How to add a warning or error notification to the ace editor

Question

I'm using the ACE editor for interactive python editing, at the same time I have a python interpreter at the back end, which will parse the python code into results.

When the user submits the code to the backend, the python parser will parse the code into results, if errors happens, it will return the row and column, as well as the description of the error in JSON format

Now the problem is how can ACE display the error in certain position

Answer 1

You can use Annotations to display an error. The editors gutter shows the error and even warning or information with the error message.

var editor = ace.edit("editor");

editor.getSession().setAnnotations([{
  row: 1,
  column: 0,
  text: "Error Message", // Or the Json reply from the parser 
  type: "error" // also "warning" and "information"
}]);

Answer 2

You can use editor.session.addMarker(Range, classname, type) and add some css e.g. .classname{position:absolute; border-bottom: 1px solid green}

For a nice example of doing this see https://github.com/c9/core/blob/a256cf12a06c8d18bd45f8797a23c507b313ab65/plugins/c9.ide.language.core/marker.js#L139