用 Markdown 语法表示目录和文件结构

unicode markdown directory-structure project-structure

关闭。此问题不符合 Stack Overflow 准则。它目前不接受答案。我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为 Stack Overflow 的主题。 2年前关闭。改进这个问题

我想用 Markdown 语法描述目录和文件结构。有没有办法巧妙地做到这一点？

.
├── _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 具有用于此目的的绘图字符，可以按原样复制粘贴：https://en.wikipedia.org/wiki/Box-drawing_character

这已在 Meta 在 Is there a good way to represent file structure in a question/answer? 上讨论过

因为您特别提到了 jekyll，所以这个简洁的 example 及其 source 可能符合要求

我正在使用 tree.nathanfriend.io

William

我按照 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），这是我可以让树工作的唯一方法，其中包含关于每个条目的内联注释。所以..从这里+1！

为这个答案点赞。 Triple backticks markdown 在 Wordpress 上也适用于我。

三反引号支持现在似乎可以在 SO 上使用。

你复制粘贴 unicode └ 符号，还是有办法用 ascii 写它们？

Dan Dascalescu

如果您担心 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 上，这不起作用

ashraful16

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

直接添加到markdown...

📦quakehunter
 ┣ 📂client
 ┣ 📂node_modules
 ┣ 📂server
 ┃ ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┗ 📜package.json

Cameron Spickert

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

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

我喜欢这个解决方案。在 Markdown 中看起来很整洁

谢谢，这是我在使用文件树生成器后一直在寻找的。

aronadaal

正如已经推荐的那样，您可以使用 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

John Byrne

我制作了一个节点模块来自动执行此任务：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。必须在 mddir npm 全局 bin 文件夹中将行尾设置为 Unix 样式。

行尾修复

获取 npm bin 文件夹路径：

npm config get prefix

cd到那个文件夹

冲泡安装dos2unix

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

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

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

示例生成的降价文件结构 '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 机器上工作，整洁的小实用程序 - 谢谢！

Ramtin Soltani

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

您可以编写以下树：

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

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

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

guneysus

我为我的 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

user3276552

我建议使用 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

并在 this 的 js 库中抛出确切的语法

felix at housecat

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

我找到了两种可能的解决方案。

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

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>

希望能帮助到你。

Exil

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

EuberDeveloper

为此有一个 NPM 模块：

npm dree

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

例子：

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

用 Markdown 语法表示目录和文件结构

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们