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


213

我想在我的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字符。



1
由于您专门提到jekyll,所以这个
不起眼的

Answers:


142

如果您担心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输出时使用的格式相似。


1
谢谢你 不过,是否应该担心使用Unicode字符?例如旧版浏览器的已知问题,Markdown渲染不正确等
Matt Rowles 2013年

2
Markdown应该不会有任何问题,它将出现在您的Jekyll模板和用户Web浏览器上。
罗伯特·肯尼(RobertKenny)

1
与仅出于装饰性原因而使用不同符号的其他选择(例如来自的输出tree)相比,该选择的另一个优势是差异较小。
villasv

1
使用此anwser时,树仅呈现为几行文本。使用md插件在VSCode和VisualStudio中进行了测试。同样在GitHub上,这不起作用
Danny

237

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

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

5
堆栈溢出不支持较新的三重反引号语法;它将它们解释为单个反引号。单个反引号将代码标记为嵌入式文本,仅在一行内;这就是为什么您的示例在每行之间都有白色条纹。为了以一种兼容的方式标记多行代码,请将文本缩进四个空格。
罗里·奥肯

3
尽管SO不支持三次反引号,但大多数其他MD实现都支持(例如Github / BitBucket),这是我获得树的唯一方法,该树可以对每个条目的内容进行内联注释。所以..从这里+1!
Scott Byers

1
竖起大拇指回答这个问题。在Wordpress上,三重反引号减价对我也适用。
Binita Bharati

三重支持现在似乎可以在SO上使用。
StriplingWarrior

41

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


酷,这看起来很有帮助,谢谢!但是理论文件结构呢?如果这是目前唯一的解决方案,我想我可能只需要复制并粘贴所需的字符。再次欢呼。
马特·罗尔斯

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


22

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

用法

节点mddir“ ../relative/path/”

要安装:npm install mddir -g

生成当前目录的markdown:mddir

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

生成相对路径:mddir〜/ Documents / whatever。

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

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

故障排除

如果收到错误“ node \ r:没有这样的文件或目录”,则问题是您的操作系统使用不同的行尾,并且如果您未将行尾样式显式设置为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/”。

示例生成的降价文件结构“ 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

1
可悲的是,我尝试了此操作,但它在我的Windows 10计算机上不起作用,看来该项目已被放弃。
Rich Hopkins

1
嗨,谢谢您试用图书馆。我一直在忙于其他项目,无法复制,但是找到了可能的解决方法。使用以下命令获取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计算机上工作,整洁的小工具-谢谢!
John Kattenhorn

19

如已经建议的那样,您可以使用tree。但是,将其与重组文本一起使用时,需要一些其他参数。

tree如果您要使用pandocpdf格式,则不会输出标准输出。

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

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

7

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

您可以编写以下树:

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

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

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

5

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

希望能帮助到你。


4

我建议使用芥末,然后您可以使用这种降价风味

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库

芥末的例子



1

为此有一个NPM模块:

npm dree

它使您可以将目录树表示为字符串或对象。通过命令行使用它可以将表示形式保存在txt文件中。

例:

$ npm dree parse myDirectory --dest ./generated --name tree
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.