Markdown语法：表示目录文件结构，方法汇总

原作者: [db:作者] 来自: [db:来源] 收藏邀请

Markdown如何表示目录结构？

我需要在博客文章中表示文件目录的结构，Markdown是否有语法支持整洁的输出方式？

例如，在Jekyll网站上可以看到at this link，目录&文件结构在页面上非常整齐地输出：

.
├── _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

上面的行块字符应该是Unicode的(如this answer here所述)，但不确定Markdown或不同的浏览器会如何处理这些字符(从而保证整洁)。Markdown支持这样的方式，表示文件目录结构，并输出为Unicode字符？

最佳解决办法

如果比较care是否为Unicode字符，可以使用ASCII构建结构，因此示例结构将变为

.
+-- _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

如果您选择ANSI输出，则与上面的tree使用的格式相似。

次佳解决办法

参照another repository中的例子，使用一个三重反引号(```)将目录结构包起来：

```
project
│   README.md
│   file001.txt    
│
└───folder1
│   │   file011.txt
│   │   file012.txt
│   │
│   └───subfolder1
│       │   file111.txt
│       │   file112.txt
│       │   ...
│   
└───folder2
    │   file021.txt
    │   file022.txt
```

第三种解决办法

可以使用tree生成与问题示例非常相似的样式。生成后，可以将其包装在<pre>标签中，以保留纯文本格式。

第四种办法

我做了一个Node模块来自动完成这个任务：mddir

使用命令

node mddir "../relative/path/"

例子

打开终端或命令提示符，并cd进入mddir /src文件夹。

使用说明：

```
$ cd ~/Documents/demo-project
$ pwd
Users/username/Documents/demo-project
$ npm install mddir --save
$ cd node_modules/mddir/src
$ pwd
Users/username/Documents/node_modules/mddir/src
$ ls
mddir.js
$ node mddir "../../../"
// Exports 'directoryList.md' in mddir/src folder
```

如果没有指定路径，mddir将默认为mddir/src文件夹之上上的三个文件夹(假设mddir安装在：project/node_modules/mddir/src中)。

目前忽略node_modules和.git文件夹。

示例生成的markdown文件结构’directoryList.md’

    |-- .bowerrc
    |-- .jshintrc
    |-- .jshintrc2
    |-- Gruntfile.js
    |-- README.md
    |-- bower.json
    |-- karma.conf.js
    |-- package.json
    |-- app
        |-- app.js
        |-- db.js
        |-- directoryList.md
        |-- index.html
        |-- mddir.js
        |-- routing.js
        |-- server.js
        |-- _api
            |-- api.groups.js
            |-- api.posts.js
            |-- api.users.js
            |-- api.widgets.js
        |-- _components
            |-- directives
                |-- directives.module.js
                |-- vendor
                    |-- directive.draganddrop.js
            |-- helpers
                |-- helpers.module.js
                |-- proprietary
                    |-- factory.actionDispatcher.js
            |-- services
                |-- services.cardTemplates.js
                |-- services.cards.js
                |-- services.groups.js
                |-- services.posts.js
                |-- services.users.js
                |-- services.widgets.js
        |-- _mocks
            |-- mocks.groups.js
            |-- mocks.posts.js
            |-- mocks.users.js
            |-- mocks.widgets.js

第五种办法

跟前面方法推荐的一样，可以使用tree。但是，为了将其与重组文本一起使用，需要一些其他参数。

如果使用pandoc生成pdf，则不会打印标准的tree输出。

tree --dirsfirst --charset=ascii /path/to/directory将生成一个很好的ASCII树，可以将其整合到文档中：

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