Representing Directory & File Structure in Markdown Syntax

Matt Rowles picture Matt Rowles · Oct 31, 2013 · Viewed 212.1k times · Source

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.

Answer

user799188 picture user799188 · Jul 25, 2014

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
```