ACE Editor to show white spaces

Question

I am using ACE editor on HTML where I've designed a custom mode for highlighting syntax on my site, thought everything seems fine with the syntax recognizing and highlighting, I am not able to find a way to show white-spaces and tab spaces just like in sublime text.

On searching I fount that we could use

getNextLineIndent(state, line, tab) { }

as a counter to check for the event in every new line.

Apart from this solution is there any default or easy option?

Answer 1

Figured it out finally!

White Spaces could be displayed (Just as in sublime text) by the following steps:

1. Open ace.js
2. Search for the word Invisibles

3. on line 14499, replace with the following code

    this.showInvisibles = true;
    this.setShowInvisibles = function(showInvisibles) 
    {
         if (this.showInvisibles == showInvisibles)
         return true;
         this.showInvisibles = showInvisibles;
         this.$computeTabString();
         return true;
   };
   

4. Save and refresh your browser, all white spaces would be displayed.
5. You can similarly toggle other available options too.

Answer 2

Use: editor.setOption("showInvisibles", true)

Answer 3

editor.setShowInvisibles(true);