How can a code editor hint at code nesting level without indentation? | Hacker News Reader

How can a code editor hint at code nesting level without indentation?

programmers.stackexchange.com

85 pointssplattne22 comments

So far the only idea is to indent everything and use a graph to shot the nesting level?

If we got rid of indentation, I'd like to think it was replaced by something that took less space, not more.

The context in the original question makes clear: the OP is not looking to save space. He wants to take out the structural (tabbed) spacing inherent from the nesting of XML in order to make it visually clear where documents have manually-inserted whitespace.

This is actually a really interesting question, although I'm not sure the answers there are very helpful. I would prefer seeing the code actually indented, and then a light-gray visual guideline where the structural indentation ends, e.g.:

  |<xml:something>
    |<xml:what-the>
      |  left some extra whitespace
    |</xml:what-the>
  |</xml:something>

Yes, I like your approach the most of those listed.

It's been a while since I used an IDE (instead of vim), but don't most of them support code-folding that provides a light gray bracket for a block of code (usually with a collapsible indicator at the top)?

Or is the effect you want slightly different?

Note vim can do folds too. (Not a commonly known feature, I only learned about it recently myself.) But the effect he wants is the literal bars showing indentation levels which I think some IDEs have... vim could fake it by highlighting the bg cells.

PHPStorm does something very similar to this, and it jars me everytime I try to use Netbeans and this is missing.

He wants automatic detection of nesting?

Good luck with that, considering I find it hard to manually decide how to indent mixed PHP, HTML and Javascript code. I can't imagine an automatic tool having any success.

That's the idea man, somebody's gotta imagine it.

That's more or less what I told him on his other question. He originally wanted to make it more general-purpose, so that this same editor interface would be used for programming languages in general. I did my best to talk him out of that madness and he has since narrowed his scope to XML.

The point is to have multiple layout/decoration algorithms to toggle between, depending on which aspect of the code the user wants to focus on.

Tell me how it could indent this correctly:

    <?if(bool):?>
      <TABLE class="foo">
    <?else:?>
      <TABLE class="bar">
    <?endif;?>
        <TR><TD></TD></TR>
      </TABLE>

If you only look at the HTML it looks like a doubly nested table.

If you only look at the PHP the inner elements of the table will not be indented correctly.

And this is a very simple example. Real code can be far more complex - for example the table tag could be generated by a function, and not even visible in this file.

If you took my indenting, and converted it into some kind of graphical display that might be cool. But automatic detection? Good luck.

This is not the question asked. The question is specifically about XML documents, where there is a single and quite easy correct answer for the indentation.

I wondered how his final result would look like with a little modification...

http://imgur.com/u5mNi

I believe Xcode 4 does something similar to the heatmaps shown here, although it does everything vertically, in shades of gray. You can sort of see it in this screenshot - look in the left-hand margin of the code editing window. http://www.neowin.net/images/uploaded/xcode4.jpg

I get a 403 forbidden (check your permissions maybe?)

outside referrers are blocked, copy and paste the url

When there is no redirect so you can click a link, and then just hit CR on the blocked page's URL.

Whoops! I just did a Google image search and found that image, it wasn't mine. I didn't realize it wouldn't link properly.

I tried to post a comment to this effect on stack exchange, but it wouldn't let me post images.

XCode does this in a single column using varying shades of grey:

   http://i.stack.imgur.com/frCcI.png

The grey rectangles may also be clicked on to fold text. On hover you see:

   http://i.stack.imgur.com/EzjXW.png

And after folding you see:

   http://i.stack.imgur.com/wsNRR.png

Xcode 3 does this as well.

Why not color the backround of the text and not have it as a side bar?

Curly braces.

Reply on news.ycombinator.com