有没有办法在Github README.md中表示目录树？

Question

在我的Githubs repos文档中，我想表示一个像这样的目录树结构：

有没有办法用Github风味的降价来做到这一点，除了用ascii艺术创造它？

所以基本上像this question，但我想知道是否有一个特定的github解决方案。

Answer 1

不直接，没有。你必须手工创造并把它放在自己身上。假设你在本地使用* nix框并使用utf，那么tree将很好地生成它（我相信这就是生成你上面使用的例子的原因）。

假设你的意思是readme.md作为文档目标，那么我认为你可以自动化它的唯一方法是运行tree并将其嵌入到自述文件中的git pre-commit钩子。你想做一个差异，以确保你只更新了自述文件，如果输出更改。

如果您通过github页面维护单独的文档，那么您可以做的是切换到本地使用jekyll（或其他生成器）并自己推送静态页面。然后，你可以潜在地实现你想要的更改作为插件/ shell脚本* /手动更改（如果它们变化不大），或者使用与上面相同的方法。

*如果将其集成到提交挂钩中，则可以避免添加任何额外的步骤来更改页面。

Answer 2

我用这种方式得到了解决问题的方法：

1. 在bash中插入命令tree。 例
2. 在github存储库中创建一个README.md并复制bash的页面
3. 插入降价代码 例
4. 看到输出并高兴=）

Answer 3

我写了一个小脚本，可以解决这个问题：

#!/bin/bash

#File: tree-md

tree=$(tree -tf --noreport -I '*~' --charset ascii $1 |
       sed -e 's/| \+/  /g' -e 's/[|`]-\+/ */g' -e 's:\(* \)\(\(.*/\)\([^/]\+\)\):\1[\4](\2):g')

printf "# Project tree\n\n${tree}"

例：

Original tree command:

$ tree
.
├── dir1
│   ├── file11.ext
│   └── file12.ext
├── dir2
│   ├── file21.ext
│   ├── file22.ext
│   └── file23.ext
├── dir3
├── file_in_root.ext
└── README.md

3 directories, 7 files

Markdown tree command:

$ ./tree-md .
# Project tree

.
 * [tree-md](./tree-md)
 * [dir2](./dir2)
   * [file21.ext](./dir2/file21.ext)
   * [file22.ext](./dir2/file22.ext)
   * [file23.ext](./dir2/file23.ext)
 * [dir1](./dir1)
   * [file11.ext](./dir1/file11.ext)
   * [file12.ext](./dir1/file12.ext)
 * [file_in_root.ext](./file_in_root.ext)
 * [README.md](./README.md)
 * [dir3](./dir3)

Rendered result:

（链接在Stackoverflow中不可见...）

Project tree

• 树-MD
• DIR2 file21.ext file22.ext file23.ext
• DIR1 file11.ext file12.ext
• file_in_root.ext
• readme.面对
• 盾

Answer 4

我创建了一个节点模块来自动完成这项任务：mddir

Usage

node mddir“../relative/path/”

要安装：npm install mddir -g

要为当前目录生成markdown：mddir

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

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

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

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

Troubleshooting

如果您收到错误'node \ r \ n：No such file or directory'，则问题是您的操作系统使用不同的行结尾，并且如果没有将行结束样式显式设置为Unix，则mddir无法解析它们。这通常会影响Windows，但也会影响某些版本的Linux。必须在mddir npm全局bin文件夹中执行将行结尾设置为Unix样式。

Line endings fix

获取npm bin文件夹路径：

npm config get prefix

Cd进入该文件夹

brew安装dos2unix

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

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

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

Example generated markdown file structure '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

Answer 5

执行此操作的最佳方法是在三重反引号中包围树以表示代码块。有关详细信息，请参阅降价文档：http://daringfireball.net/projects/markdown/syntax#code

Answer 6

你可以像我在我的一个projects中那样使用<pre>标签。

Answer 7

你也可以查看这个tree-extended包。它可以通过使用node> = 6.x用作命令行应用程序。

它与tree非常相似，但也可以选择在树中配置最大深度，这是它的可怕之处。您也可以使用.gitignore文件进行过滤。

Answer 8

简单的tree命令将完成这项工作。例如：tree -o readme.md将打印当前工作目录的树结构并将其写入readme.md。然后在像Sublime这样的文本编辑器之一中打开readme.md文件，并将其内容包装在一对三重反引号（```）中。

仅供参考：如果尚未安装OSX，您可能需要在OSX中进行brew安装树。在Linux和Windows中它应该可以正常工作。同样在Windows中，您可能必须使用正斜杠替换连字符。

我希望这有帮助。

Answer 9

我只想用UTF-8生成它并将其链接到每个文件和文件夹，以便轻松导航。请看一下示例here。