【问题标题】：Representing Directory & File Structure in Markdown Syntax [closed]用 Markdown 语法表示目录和文件结构
【发布时间】：2013-11-11 00:26:49
【问题描述】：

我想在我的一些 Jekyll 博客文章中描述目录和文件结构，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 字符。

【问题讨论】：

这已在 Meta 上讨论，Is there a good way to represent file structure in a question/answer?
既然你特别提到了 jekyll，这个简洁的 example 和它的 source 可能符合要求
我正在使用tree.nathanfriend.io

标签： unicode markdown jekyll directory-structure project-structure

【解决方案1】：

我遵循another repository 中的一个示例，并将目录结构包装在一对三重反引号 (```) 中：

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

【讨论】：

Stack Overflow 不支持更新的三反引号语法；它将它们解释为单个反引号。单反引号将代码标记为内联文本，仅在一行内；这就是为什么您的示例在每行之间都有白色条纹。要以兼容的方式标记多行代码，请将文本缩进四个空格。
虽然 SO 不支持三反引号，但大多数其他 MD 实现都支持（如 Github/BitBucket），这是我可以让具有内联 cmets 的树工作的唯一方法条目是。所以.. 从这里 +1！
为这个答案点赞。三重反引号降价在 Wordpress 上也适用于我。
三反引号支持现在似乎可以在 SO 上使用。

【解决方案2】：

如果您关心 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 使用的格式。

【讨论】：

谢谢。不过，是否应该担心使用 Unicode 字符？例如旧浏览器的已知问题、Markdown 渲染不正确等
Markdown 应该没有任何问题，它将出现在您的 Jekyll 模板和用户网络浏览器上。
与其他仅出于美观原因使用不同符号的选择相比，此选择的另一个优点是差异更小（例如 tree 的输出）。
当使用这个 anwser 时，树只是呈现为几行文本。使用 md 插件在 VSCode 和 VisualStudio 中测试。同样在 GitHub 上，这不起作用

【解决方案3】：

如果您使用的是 VS Code，这是用于生成文件树的 awesome extension。

直接添加到markdown...

?quakehunter
 ┣ ?client
 ┣ ?node_modules
 ┣ ?server
 ┃ ┗ ?index.js
 ┣ ?.gitignore
 ┣ ?package-lock.json
 ┗ ?package.json

【讨论】：

【解决方案4】：

您可以使用tree 生成与您的示例非常相似的内容。获得输出后，您可以将其包装在 <pre> 标记中以保留纯文本格式。

【讨论】：

酷，这看起来很有帮助，谢谢！但是对于理论上的文件结构呢？如果这是目前唯一的解决方案，我想我可能只需要复制并粘贴我需要的字符。再次欢呼。
我喜欢这个解决方案。在 Markdown 中看起来很整洁

【解决方案5】：

如前所述，您可以使用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

【讨论】：

【解决方案6】：

我做了一个节点模块来自动化这个任务：mddir

用法

节点 mddir "../relative/path/"

安装：npm install mddir -g

为当前目录生成markdown：mddir

为任何绝对路径生成：mddir /absolute/path

为相对路径生成：mddir ~/Documents/whatever。

md 文件在您的工作目录中生成。

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

疑难解答

如果您收到错误“节点\r：没有这样的文件或目录”，问题是您的操作系统使用不同的行尾，并且 mddir 无法解析它们，除非您将行尾样式显式设置为 Unix。这通常会影响 Windows，但也会影响某些版本的 Linux。将行尾设置为 Unix 样式必须在 mddir npm 全局 bin 文件夹中执行。

行尾修复

获取 npm bin 文件夹路径：

npm config get prefix

光盘进入该文件夹

brew install dos2unix

dos2unix lib/node_modules/mddir/src/mddir.js

这会将行尾转换为 Unix 而不是 Dos

然后正常运行：node mddir "../relative/path/"。

示例生成的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

【讨论】：

很遗憾，我试过这个，在我的Windows 10机器上不行，看来项目已经放弃了。
您好，感谢您试用该库。我一直忙于其他项目，无法复制，但找到了可能的解决方法。使用以下命令获取 npm bin 文件夹路径：'npm config get prefix'。 cd 进入该文件夹，然后运行“brew install dos2unix”，运行“dos2unix lib/node_modules/mddir/src/mddir.js”。这会将行尾转换为 Unix 而不是 Dos。然后正常运行： node mddir "../relative/path/".
在我的 Windows 10 机器上工作，整洁的小实用程序 - 谢谢！

【解决方案7】：

如果您使用的是 Atom 编辑器，您可以通过 ascii-tree 包完成此操作。

你可以写如下树：

root
+-- dir1
    +--file1
+-- dir2
    +-- file2

并通过选择它并按ctrl-alt-t将其转换为以下内容：

root
├── dir1
│   └── file1
└── dir2
    └── file2

【讨论】：

【解决方案8】：

我为我的 Dropbox 文件列表编写了这个脚本。

sed 用于删除-> 之后的符号链接文件/文件夹路径的完整路径

~~不幸的是，标签丢失了。~~使用zsh我可以保留标签。

~~!/usr/bin/env bash~~

#!/usr/bin/env zsh

F1='index-2.md' #With hyperlinks
F2='index.md'

if [ -e $F1 ];then
    rm $F1
fi

if [ -e $F2 ];then
    rm $F2
fi

DATA=`tree --dirsfirst -t -Rl --noreport | \
    sed 's/->.*$//g'`             # Remove symlink adress and ->

echo -e '```\n' ${DATA} '\n```' > $F1  # Markdown needs triple back ticks for <pre>

# With the power of piping, creating HTML tree than pipe it
# to html2markdown program, creates cool markdown file with hyperlinks.

DATA=`tree --dirsfirst -t -Rl --noreport -H http://guneysu.pancakeapps.com`
echo $DATA | \
    sed 's/\r\r/\n/g' | \
    html2markdown | \
    sed '/^\s*$/d' | \
    sed 's/\# Directory Tree//g' | \
        > $F2

输出如下：

```
 .
├── 2013 
│   └── index.markdown
├── 2014 
│   └── index.markdown
├── 2015 
│   └── index.markdown
├── _posts 
│   └── 2014-12-27-2014-yili-degerlendirmesi.markdown
├── _stash 
└── update.sh 
```

[BASE_URL/](BASE_URL/)
├── [2013](BASE_URL/2013/)
│   └── [index.markdown](BASE_URL/2013/index.markdown)
├── [2014](BASE_URL/2014/)
│   └── [index.markdown](BASE_URL/2014/index.markdown)
├── [2015](BASE_URL/2015/)
│   └── [index.markdown](BASE_URL/2015/index.markdown)
├── [_posts](BASE_URL/_posts/)
│   └── [2014-12-27-2014-yili-degerlendirmesi.markdown](_posts/2014-12-27-2014-yili-degerlendirmesi.markdown)
├── [_stash](BASE_URL/_stash/)
├── [index-2.md](BASE_URL/index-2.md)
└── [update.sh](BASE_URL/update.sh)
* * *
tree v1.6.0 © 1996 - 2011 by Steve Baker and Thomas Moore
HTML output hacked and copyleft © 1998 by Francesc Rocher
Charsets / OS/2 support © 2001 by Kyosuke Tokoro

【讨论】：

【解决方案9】：

我建议使用 wasabi 然后你可以使用 markdown-ish 的感觉

root/ # entry comments can be inline after a '#'
      # or on their own line, also after a '#'

  readme.md # a child of, 'root/', it's indented
            # under its parent.

  usage.md  # indented syntax is nice for small projects
            # and short comments.

  src/          # directories MUST be identified with a '/'
    fileOne.txt # files don't need any notation
    fileTwo*    # '*' can identify executables
    fileThree@  # '@' can identify symlinks

并在 js 库中为 this 提供确切的语法

【讨论】：

【解决方案10】：

在 OSX 下，使用 reveal.js，如果我只使用 tree 然后复制/粘贴输出，则会出现渲染问题：出现奇怪的符号。

我找到了 2 个可能的解决方案。

1) 使用 charset ascii 并简单地将输出复制/粘贴到 markdown 文件中

tree -L 1 --charset=ascii

2) 在markdown文件中直接使用HTML和unicode

<pre>
.
&#8866; README.md
&#8866; docs
&#8866; e2e
&#8866; karma.conf.js
&#8866; node_modules
&#8866; package.json
&#8866; protractor.conf.js
&#8866; src
&#8866; tsconfig.json
&#8985; tslint.json
</pre>

希望对你有帮助。

【讨论】：

【解决方案11】：

如果您希望动态生成它，我建议使用Frontend-md。使用简单。

【讨论】：

【解决方案12】：

为此有一个 NPM 模块：

npm dree

它允许您将目录树表示为字符串或对象。将其与命令行一起使用将允许您将表示保存在 txt 文件中。

例子：

$ npm dree parse myDirectory --dest ./generated --name tree

【讨论】：