Matt Rowles Matt Rowles - 3 months ago 34
Markdown Question

Representing Directory & File Structure in Markdown Syntax

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

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.

Comments