Plugin: changing colors of characters in Atom


I am trying to create a plugin where I need the colors of each individual characters to change over a period of time. These characters are chosen based on the screen coordinates so ‘a’ at (1,1) might not have the same color as ‘a’ at (1,2).

I tried splitting words into separate tags and then, adding my own class.
For example, var,
I would split the tag into 2 tags and add my own class “blueColor” to one of the tags.
Resulting tags look as follow:
It is successful in changing the colours correctly.

However, this causes the cursor’s position to be negative whenever it is in that line so it is not visible to the user.
Furthermore, for a line like ‘var x = 10;’, when the cursor is suppose to be at x, it will sometimes select ‘x = 10;’ instead.
Do I need to update something with regards to the changes that I make?

Another issue is that when the user types in new characters, the colors are reverted and I suppose this is due to the themes. However, I cannot really set the themes because ‘a’ at position (1,1) and ‘a’ at position (1,2) would be the same with regards to the themes.

Any input would be nice, even a suggestion on an alternative approach is welcomed.