Nested list version of file tree view from Hugo docs


I really liked Hugo docs’ representations of file trees, so I recreated it in CSS using nested lists to make the markup more accessible:

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 %}}


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


The updated version is in the same place (no longer uses background hack, so is all unicode):

The shortcode is really simple:

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

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.