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

Question

我想在我的一些Jekyll博客文章中描述目录和文件结构,Markdown是否提供了输出这样一个东西的简洁方法？

例如,您可以在 Jekyll网站上的此链接中看到目录和文件结构在页面上非常整齐地输出:

.
??? _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(如此答案中所述),但不确定Markdown或不同浏览器如何处理它们.我希望Markdown已经包含了一些这样做的方法,输出可能是上面的Unicode字符.

Answer 1

我在另一个存储库中跟踪了一个示例,并将目录结构包装在一对三重反引号中(```):

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

Answer 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

tree如果选择ANSI输出,则类似于格式使用.

Answer 3

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

Answer 4

我制作了一个节点模块来自动执行这项任务:mddir

用法

node mddir"../relative/path/"

要安装:npm install mddir -g

要为当前目录生成markdown:mddir

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

为相对路径生成:mddir~/Documents/whatever.

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

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

故障排除

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

行结尾修复

获取npm bin文件夹路径:

npm config get prefix

Cd进入该文件夹

brew安装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

Answer 5

正如已经推荐的那样,你可以使用tree.但是为了将它与重组文本一起使用,需要一些额外的参数.

tree如果您pandoc用于生成pdf,则不会打印标准输出.

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

Answer 6

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

Answer 7

我建议使用芥末，然后你可以使用 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库本

Answer 8

If you're using VS Code, this is an awesome extension for generating file trees. https://marketplace.visualstudio.com/items?itemName=Shinotatwu-DS.file-tree-generator

Added directly to markdown...

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

Answer 9

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

您可以编写以下树：

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

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

root
??? dir1
?   ??? file1
??? dir2
    ??? file2

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

希望能帮助到你。