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