Representing Directory & File Structure in Markdown Syntax
Solution 1
If you are concerned about Unicode characters you can use ASCII to build the structures, so your example structure becomes
.
+-- _config.yml
+-- _drafts
| +-- begin-with-the-crazy-ideas.textile
| +-- on-simplicity-in-technology.markdown
+-- _includes
| +-- footer.html
| +-- header.html
+-- _layouts
| +-- default.html
| +-- post.html
+-- _posts
| +-- 2007-10-29-why-every-programmer-should-play-nethack.textile
| +-- 2009-04-26-barcamp-boston-4-roundup.textile
+-- _data
| +-- members.yml
+-- _site
+-- index.html
Which is similar to the format tree
uses if you select ANSI
output.
Solution 2
I followed an example in another repository and wrapped the directory structure within a pair of triple backticks (```
):
```
project
│ README.md
│ file001.txt
│
└───folder1
│ │ file011.txt
│ │ file012.txt
│ │
│ └───subfolder1
│ │ file111.txt
│ │ file112.txt
│ │ ...
│
└───folder2
│ file021.txt
│ file022.txt
```
Solution 3
If you're using VS Code, this is an awesome extension for generating file trees.
Added directly to markdown...
📦quakehunter
┣ 📂client
┣ 📂node_modules
┣ 📂server
┃ ┗ 📜index.js
┣ 📜.gitignore
┣ 📜package-lock.json
┗ 📜package.json
Solution 4
You can use tree to generate something very similar to your example. Once you have the output, you can wrap it in a <pre>
tag to preserve the plain text formatting.
Solution 5
As already recommended, you can use tree
. But for using it together with restructured text some additional parameters were required.
The standard tree
output will not be printed if your're using pandoc
to produce pdf.
tree --dirsfirst --charset=ascii /path/to/directory
will produce a nice ASCII
tree that can be integrated into your document like this:
.. code::
.
|-- ContentStore
| |-- de-DE
| | |-- art.mshc
| | |-- artnoloc.mshc
| | |-- clientserver.mshc
| | |-- noarm.mshc
| | |-- resources.mshc
| | `-- windowsclient.mshc
| `-- en-US
| |-- art.mshc
| |-- artnoloc.mshc
| |-- clientserver.mshc
| |-- noarm.mshc
| |-- resources.mshc
| `-- windowsclient.mshc
`-- IndexStore
|-- de-DE
| |-- art.mshi
| |-- artnoloc.mshi
| |-- clientserver.mshi
| |-- noarm.mshi
| |-- resources.mshi
| `-- windowsclient.mshi
`-- en-US
|-- art.mshi
|-- artnoloc.mshi
|-- clientserver.mshi
|-- noarm.mshi
|-- resources.mshi
`-- windowsclient.mshi
Matt Rowles
Updated on July 16, 2022Comments
-
Matt Rowles almost 2 years
I want to describe directory & file structures in some of my Jekyll blog posts, does Markdown provide a neat way of outputting such a thing?
For example, you can see at this link on the Jekyll website that the directory & file structure is output on the page very neatly:
. ├── _config.yml ├── _drafts │ ├── begin-with-the-crazy-ideas.textile │ └── on-simplicity-in-technology.markdown ├── _includes │ ├── footer.html │ └── header.html ├── _layouts │ ├── default.html │ └── post.html ├── _posts │ ├── 2007-10-29-why-every-programmer-should-play-nethack.textile │ └── 2009-04-26-barcamp-boston-4-roundup.textile ├── _data │ └── members.yml ├── _site └── index.html
I believe the line block characters above are Unicode (as described in this answer here), but I am not sure how Markdown or different browsers will handle them. I was hoping that Markdown had included some way of doing this which outputs as the Unicode characters above perhaps.