當前位置: 首頁>>技術教程>>正文


Markdown語法:表示目錄文件結構,方法匯總

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

參考的論壇資料

本文由《純淨天空》出品。文章地址: https://vimsky.com/zh-tw/article/3606.html,未經允許,請勿轉載。