webentwicklung-frage-antwort-db.com.de

Darstellung der Verzeichnis- und Dateistruktur in Markdown-Syntax

Ich möchte Verzeichnis- und Dateistrukturen in einigen meiner Jekyll-Blog-Posts beschreiben. Bietet Markdown eine gute Möglichkeit, solche Inhalte auszugeben?

Zum Beispiel können Sie nter diesem Link auf der Jekyll-Website sehen, dass die Verzeichnis- und Dateistruktur auf der Seite sehr ausgegeben wird ordentlich:

.
├── _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

Ich glaube, die obigen Zeilenblockzeichen sind Unicode (wie in diese Antwort hier), aber nicht sicher, wie Markdown oder anders Browser werden damit umgehen. Ich hatte gehofft, dass Markdown eine Möglichkeit dazu beinhaltet, die möglicherweise als die obigen Unicode-Zeichen ausgegeben wird.

158
Matt Rowles

Wenn Sie sich Gedanken über Unicode-Zeichen machen, können Sie die Strukturen mit ASCII erstellen, damit Ihre Beispielstruktur wird

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

Dies ähnelt dem Format, das tree verwendet, wenn Sie ANSI ausgeben.

111
RobertKenny

Ich folgte einem Beispiel in einem anderen Repository und hüllte die Verzeichnisstruktur in ein Paar dreifacher Backticks (```):

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

Sie können Baum verwenden, um etwas zu generieren, das Ihrem Beispiel sehr ähnlich ist. Sobald Sie die Ausgabe haben, können Sie sie in ein <pre> -Tag, um die Nur-Text-Formatierung beizubehalten.

32

Ich habe ein Knotenmodul erstellt, um diese Aufgabe zu automatisieren: mddir

Verwendungszweck

knoten mddir "../relative/path/"

So installieren Sie: npm install mddir -g

So generieren Sie einen Markdown für das aktuelle Verzeichnis: mddir

So generieren Sie für einen absoluten Pfad: mddir/absolute/path

So generieren Sie einen relativen Pfad: mddir ~/Documents/whatever.

Die MD-Datei wird in Ihrem Arbeitsverzeichnis erstellt.

Ignoriert derzeit die Ordner node_modules und .git.

Fehlerbehebung

Wenn Sie den Fehler "node\r: No such file or directory" erhalten, besteht das Problem darin, dass Ihr Betriebssystem unterschiedliche Zeilenenden verwendet und mddir diese nicht analysieren kann, ohne dass Sie den Zeilenendenstil explizit auf Unix setzen. Dies betrifft normalerweise Windows, aber auch einige Linux-Versionen. Das Festlegen von Zeilenenden im Unix-Stil muss im globalen bin-Ordner von mddir npm erfolgen.

Zeilenenden korrigieren

Holen Sie sich den Pfad des Ordners npm bin mit:

npm config get prefix

CD in diesen Ordner

installieren Sie dos2unix

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

Dies konvertiert Zeilenenden zu Unix anstelle von Dos

Dann wie gewohnt ausführen mit: node mddir "../relative/path/".

Beispiel für eine generierte Markdown-Dateistruktur '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
20
John Byrne

Wie bereits empfohlen, können Sie tree verwenden. Für die Verwendung zusammen mit umstrukturiertem Text waren jedoch einige zusätzliche Parameter erforderlich.

Die Standardausgabe tree wird nicht gedruckt, wenn Sie pandoc zum Erstellen von PDFs verwenden.

tree --dirsfirst --charset=ascii /path/to/directory erstellt einen Nice ASCII -Baum, der wie folgt in Ihr Dokument integriert werden kann:

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

Ich habe dieses Skript für meine Dropbox-Dateiliste erstellt.

sed wird verwendet, um vollständige Pfade von symbolisch verknüpften Datei-/Ordnerpfaden nach -> zu entfernen.

Leider gehen Tabs verloren. Mit zsh kann ich Tabs beibehalten.

!/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

Die Ausgaben wie folgt:

```
 .
├── 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
6
guneysus

Unter OSX mit reveal.js, Ich habe ein Rendering-Problem, wenn ich nur tree benutzte und dann die Ausgabe kopiere/einfüge: Es erscheinen seltsame Symbole.

Ich habe 2 mögliche Lösungen gefunden.

1) Verwenden Sie charset ascii und kopieren Sie die Ausgabe einfach in die Markdown-Datei

tree -L 1 --charset=ascii

2) Verwenden Sie direkt HTML und Unicode in der Markdown-Datei

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

Ich hoffe es hilft.

5

Wenn Sie den Atom Editor verwenden, können Sie dies mit dem ascii-tree Paket erreichen.

Sie können den folgenden Baum schreiben:

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

und konvertiere es in das Folgende, indem du es auswählst und ctrl-alt-t drückst:

root
├── dir1
│   └── file1
└── dir2
    └── file2
5
Ramtin Soltani

Ich würde vorschlagen, wasabi zu verwenden, dann können Sie entweder das markdown-ish Gefühl wie folgt verwenden

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
    [email protected]  # '@' can identify symlinks

und werfen Sie die genaue Syntax in die js-Bibliothek für this

wasabi example

4
user3276552

Wenn Sie VS Code verwenden, ist dies eine großartige Erweiterung zum Generieren von Dateibäumen. https://marketplace.visualstudio.com/items?itemName=Shinotatwu-DS.file-tree-generator

Direkt zum Markdown hinzugefügt ...

????quakehunter
 ┣ ????client
 ┣ ????node_modules
 ┣ ????server
 ┃ ┗ ????index.js
 ┣ ????.gitignore
 ┣ ????package-lock.json
 ┗ ????package.json
3
Will Ward

Wenn Sie es dynamisch generieren möchten, empfehle ich die Verwendung von Frontend-md . Es ist einfach zu bedienen.

1
Bruno Wego