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