Highlight every function block with different color


I am wondering what the best way to highlight every function block with different colors is. I am very new to the atom API. Currently I am trying to use let decoration = editor.decorateMarker(marker, {type: 'line', class: 'atom-function-hihglighter'}) to assign a class to each function. However, I am not sure if this is the best way to do this or how to get the marker to pass into editor.decorateMarker.

For example:

//background color orange:
function foo () {
  //do something
//background color red:
function bar () {
  //do something


It sounds fine to me.

how to get the marker to pass into editor.decorateMarker.

A DisplayMarker is a type of object that gets created when you use a function like editor.markBufferRange(). It doesn’t do much on its own, but it contains the information that the TextEditor requires to apply a variety of style changes to a specific area of the buffer that remain stable over time. You typically just assign the marker to a variable and pass that variable into editor.decorateMarker.


Thanks, That makes sense. I looked into editor.markBufferRange() and I think I understand it much better now. The last thing that I am unclear on is how to get a specific function/block. Should I use something like editor.scan? Thanks again for the help.


editor.scan() is an effective way to obtain a Range, yes. If you want the user to be able to control your package, you can get a lot of information from the Cursor and various cursor-related actions can be associated with different controls of your package (like what happens if the user has multiple selections).


Actually, I do not want the user to be able to control it much at all. The thing I want is to highlight each function and block in a different color. But I appreciate your suggestion.


But how do you determine which function gets which color?


I could use an array, or just randomly assign them. That part isn’t really important.


That’s a very important user interface consideration. Are you highlighting every function block, or just specific ones? How would I use your package to color-code my classes if the user doesn’t have any control?


I am highlighting every function. I ended up figuring it out just by using a custom grammar. Thank you for the help though.