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.

1 Like

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.