Nested list version of file tree view from Hugo docs

Announcements
1

I really liked Hugo docs’ representations of file trees, so I recreated it in CSS using nested lists to make the markup more accessible: https://codepen.io/heydon/pen/PjLVWm/

The thing I’m working on uses a simple shortcode to let you make file tree representations using lists in markdown:

{{% fileTree %}}
* Top level
    * Second level
    * Second level
        * Third level
* Top level
{{% /fileTree %}}
2

That’s really cool, please post your final version when you have it ready! That would definitely be useful for me too.

3

The updated version is in the same place (no longer uses background hack, so is all unicode): https://codepen.io/heydon/pen/PjLVWm/

The shortcode is really simple:

<div class="file-tree">
  {{ .Inner }}
</div>

Note that the only limitation is the number of vertical lines drawn in the pseudo-content for the <ul>s. You can add more if you think your use case will need it. Currently it allows 20 files or folders in one vertical set.