Directory listings format looks similar to commands / output

[brondsem]

Some coders have commented that the directory structures shown in the tutorial can be confusing because they look like commands / command output, but they don't show up in the terminal. Example:

[brondsem]

I have a small proof-of-concept that shows the directory structure more visually. What do people think of this?

It is still all markdown/html (not a screenshot) so it is maintainable, but the syntax for it is quite ugly currently so I would need to improve it. (Thus asking for feedback before making a pull request).

There are also pages that use directory trees to tell you to create a file or folder. I am not sure what would be most clear for those. Example:

[jacebrowning]

I think the visual directory structure looks great! Could you share the code that generates this?

[brondsem]

The code is at https://github.com/brondsem/djangogirls-tutorial/commit/e8fb212dee528ca80b9ec48c91fc6e4ad0376316 but as I said its pretty ugly. I would make it into a nunjucks macro I think, if folks are interested in this.

[ekohl]

@brondsem I can confirm most users don't recognize the output of tree and even then you can't replicate it because the virtualenv is usually in there. Your suggestion looks good and I think it'll remove confusion by students.

[ekohl]

Any update on this? This would remove a lot of common questions.