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

时间：2014-06-02 07:23:00

标签： github markdown

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

enter image description here

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

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

16 个答案:

答案 0 :(得分：54)

我以这种方式解决了问题：

  1. 在bash中插入命令tree。

      

    实施例

         
        

    enter image description here

      

  2. 在github存储库中创建一个README.md并复制bash的页面

  3. 插入降价代码
      

    实施例

         
        

    enter image description here

      
  4. 看输出并开心=）
      

    enter image description here

答案 1 :(得分：29)

我写了一个小脚本来完成这个伎俩：

#!/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}"

实施例

原始树命令：

$ 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-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)

渲染结果：

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

项目树
  • 树-MD
  • DIR2
    • file21.ext
    • file22.ext
    • file23.ext
  • DIR1
    • file11.ext
    • file12.ext
  • file_in_root.ext
  • README.md
  • DIR3

答案 2 :(得分：19)

不直接，不。你必须手工制作它并把它放在自己身上。假设您在本地使用* nix框并使用utf，那么tree将很好地生成它（我相信这就是生成上面使用的示例的内容）。

假设你的意思是readme.md作为文档目标，那么我认为你可以自动化它的唯一方法是运行tree并将其嵌入到自述文件中的git预提交钩子。您想要进行差异以确保在输出更改时仅更新自述文件。

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

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

答案 3 :(得分：15)

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

用法

节点mddir＆＃34; ../ relative / path /＆＃34;

安装：npm install mddir -g

为当前目录生成markdown：mddir

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

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

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

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

故障排除

如果您收到错误＆＃39;节点\ r \ n：没有此类文件或目录＆＃39;，问题是您的操作系统使用不同的行结尾，并且mddir无法在不明确设置的情况下解析它们行结束样式到Unix。这通常会影响Windows，但也会影响某些版本的Linux。必须在mddir npm全局bin文件夹中执行将行结尾设置为Unix样式。

行结尾修复

获取npm bin文件夹路径：

npm config get prefix

cd进入该文件夹

brew install dos2unix

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

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

然后正常运行：node mddir＆＃34; ../ relative / path /＆＃34;。

示例生成的降价文件结构＆＃39; directoryList.md＆＃39; 

    |-- .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

答案 4 :(得分：7)

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

答案 5 :(得分：3)

这里有用的clip对我有用。

git alias

这是git config --global alias.tree '! git ls-tree --full-name --name-only -t -r HEAD | sed -e "s/[^-][^\/]*\// |/g" -e "s/|\([^ ]\)/|-- \1/"'

的输出 
git tree

类似的jonavon@XPS13:~/projects/roman-numerals$ git tree .gitignore pom.xml src |-- main | |-- java | | |-- com | | | |-- foxguardsolutions | | | | |-- jonavon | | | | | |-- AbstractFile.java | | | | | |-- roman | | | | | | |-- Main.java | | | | | | |-- Numeral.java | | | | | | |-- RomanNumberInputFile.java | | | | | | |-- RomanNumeralToDecimalEvaluator.java |-- test | |-- java | | |-- com | | | |-- foxguardsolutions | | | | |-- jonavon | | | | | |-- roman | | | | | | |-- InterpretSteps.java | | | | | | |-- RunCukesTest.java | |-- resources | | |-- com | | | |-- foxguardsolutions | | | | |-- jonavon | | | | | |-- roman | | | | | | |-- Interpret.feature | | |-- sample-input.txt 命令

tree

显然树的输出更好，但是我希望它使用我的.gitignore文件。这样我的编译内容就不会显示

答案 6 :(得分：2)

您可以使用＆lt; pre＆gt;像我在projects之一中所做的标记。

答案 7 :(得分：2)

您还可以查看此tree-extended包。它可以通过使用节点＆gt; = 6.x用作命令行应用程序。

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

enter image description here

答案 8 :(得分：1)

如果在Windows上工作，请在命令提示符下的目录中写入tree /f。这应该做你的工作。您可以将输出复制并粘贴到我的三倍后勾号周围的markdown上，即'''{tree structure here}'''

答案 9 :(得分：1)

是的，有一种方法，在您的 readme.md 文件中，只需将您生成的树复制并粘贴到三个反引号之间，就像您在 Markdown 中编写代码一样，它会起作用。请看下面的附件。 ``` your tree ```

enter image description here

答案 10 :(得分：0)

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

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

我希望这会有所帮助。

答案 11 :(得分：0)

以上解决方案都无法在Mac上完全为我工作。

我发现最好的解决方案是使用此处创建的实用程序。

https://github.com/michalbe/md-file-tree

一旦安装了实用程序npm install md-file-tree -g，您就可以运行以获取所有文件树

md-file-tree . > README.md

答案 12 :(得分：0)

对于那些需要快速解决方案的人：

有一种方法可以通过在终端中键入以下命令来获得与树的输出类似的输出到控制台：

ls -R YOURFOLDER | grep ':$' | sed -e 's/:$//' -e 's/[^\/]*\//|  /g' -e 's/|  \([^|]\)/|–– \1/g'

本文档中提到了这种替代方法：https://wiki.ubuntuusers.de/tree/

然后可以将输出复制并封装到具有代码块反写标记的.md文件中，如乔纳萨斯（Jonathas B.C.）的回答中所述。

但是请注意，它还会输出节点项目中的所有节点模块文件夹。在树中，您可以做类似的事情

tree -I node_modules

排除节点模块文件夹。

答案 13 :(得分：0)

在bash中插入命令树。

此外，还有一个DOS命令“树”。您可以使用以下命令在每个子目录中显示目录路径和文件：

tree /F

https://web.csulb.edu/~murdock/tree.html

答案 14 :(得分：0)

这个 python module（我是作者）根据添加到项目文件中的特定标签动态生成目录树。

例如，在文件中插入如下注释行：

# [treesource] the file description

将在生成树中为此文件生成一个条目。 默认情况下，树仅显示已标记的文件。

生成的树看起来像这样：

$ python -m treesource
.
├── example_folder\
│   ├── first_subfolder\ (a documented folder)
│   │   ├── sub-sub1\
│   │   │   └── file3.sh (this is file 3)
│   │   ├── sub-sub2\
│   │   │   └── file4.cpp (this is file 4)
│   │   └── random_file.rdm (a documented file)
│   ├── second_subfolder\ (a documented folder with no documented files)
│   ├── a_text_file.txt (a text file)
│   ├── my_javascript.js (this is file 1)
│   └── test.py (a python script)
└── README.md (The main readme)

并且可以直接导出为makdown格式：

.
├── example_folder\
│ ├── first_subfolder\ 一个文档文件夹
│ │ ├── sub-sub1\
│ │ │ └── file3.sh 这是文件 3
│ │ ├── sub-sub2\
│ │ │ └── file4.cpp 这是文件 4
│ │ └── random_file.rdm 文档化文件
│ ├── second_subfolder\ 没有文档文件的文档文件夹
│ ├── a_text_file.txt 一个文本文件
│ ├── my_javascript.js 这是文件 1
│ └── test.py 一个 python 脚本
└── README.md 主要自述\

答案 15 :(得分：-1)

我只是喜欢用UTF-8生成它，并将其链接到每个文件和文件夹以非常容易地导航。请看一下示例here。

相关问题
最新问题