Indentation Guides - Design advice

1

My new QMBASIC mode is coming along nicely. I’m beginning to look at features for phase 2.

One thing that I’ve wanted in various editors for many years is the indentation guidelines - vertical lines at each level of indentation.

for i = 1 to 50
     begin case
    |      case i = 10
    |     |    print 'it is 10'
    |     case i = 50
    |     |     print 'it is fifty'
    end case
next i

This is a very simple example. The power of this comes into play when you have many nested loops and they go on for a number of pages. This is extremely helpful for people like me with vision issues.

We do not wish to embed the pipe symbol inside the whitespace created by the indention. It would need to be done in the rendering phase when the line is re-displayed in the editor.

What we do know about the line is:
the indentation level as an integer
the number of spaces used at each level

The padding spaces is user-configurable to their preferences. I like 4. So, each indentation level gets 4 spaces.

This information is available in the state object for each line.

What is the best approach?

2

There’s an implementation for Brackets (an editor based on CodeMirror) here, you might be able to get inspiration from that.

3

Thanks to marjin :+1::+1:for creating this wonderful syntax highlighter … . . .
Hey n4hpg , I have a solution of your probem
See Visible Tabs in demos of CodeMirror and after adding it your editor , you need to do some
CSS :–
.cm-tab {
background-position: right;
background-repeat: no-repeat;
border-left: 1px solid silver;
}
Set the background-image of cm-tab to none and then enjoy Indention guides in your editor.

4

@GulshanJI in the way you said, it woks ,but i don’t want the border appears after the content i input, like below, what should i do ?
for i = 1 to 50
begin case | | |
| case i = 10 | |
| | print ‘it is 10’ | |
| case i = 50 | |
| | print ‘it is fifty’ | |