Représentation de la structure des répertoires et des fichiers dans la syntaxe Markdown

je veux décrire les structures des répertoires et des fichiers dans certains de mes billets de Jekyll blog, est-ce que Markdown fournit une façon soignée de sortir une telle chose?

par exemple, vous pouvez voir à ce lien sur le site Jekyll que le répertoire & la structure du fichier est sortie sur la page très clairement: 

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

je crois que les caractères de bloc de ligne ci-dessus sont Unicode (comme décrit dans cette réponse ici ), mais vous ne savez pas comment Markdown ou différents navigateurs puisse les gérer. J'espérais que Markdown avait inclus une certaine façon de faire ce qui sort comme les caractères Unicode ci-dessus peut-être.

117
demandé sur Community 2013-10-31 09:27:40

10 réponses

si vous êtes préoccupé par les caractères Unicode, vous pouvez utiliser ASCII pour construire les structures, de sorte que votre exemple de structure devient 

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

qui est similaire au format tree utilise Si vous sélectionnez ANSI sortie.

85
répondu RobertKenny 2014-10-02 17:07:47

j'ai suivi un exemple dans un autre dépôt et j'ai enveloppé la structure du répertoire dans une paire de triple bâtons ( ``` ): 

```
project
│   README.md
│   file001.txt    
│
└───folder1
│   │   file011.txt
│   │   file012.txt
│   │
│   └───subfolder1
│       │   file111.txt
│       │   file112.txt
│       │   ...
│   
└───folder2
    │   file021.txt
    │   file022.txt
```
119
répondu user799188 2016-08-19 11:24:33

Vous pouvez utiliser arbre pour générer quelque chose de très similaire à votre exemple. Une fois que vous avez la sortie, vous pouvez l'envelopper dans une étiquette <pre> pour préserver le formatage de texte simple.

26
répondu Cameron Spickert 2013-10-31 05:31:12

j'ai fait un module de noeud pour automatiser cette tâche: mddir

Utilisation

nœud mddir "../relative/chemin/"

à installer: npm install mddir-g

pour générer markdown pour le répertoire courant: mddir

Pour générer pour n'importe quel chemin d'accès absolu: mddir chemin /chemin/absolu

à générer pour un chemin relatif: mddir ~/Documents/whatever.

le fichier md est généré dans votre répertoire de travail.

ignore node_modules, and .dossiers git.

dépannage

si vous recevez l'erreur 'node\r: notedefile or directory', le problème est que votre système d'exploitation utilise des fins de ligne différentes et mddir ne peut pas les Parser sans que vous définissiez explicitement le style de fin de ligne à Unix. Cela affecte généralement Windows, mais aussi certains les versions de Linux. La définition des fins de ligne au style Unix doit être effectuée dans le dossier global bin de mddir npm.

fin de ligne fixe

Obtenir mnp bin chemin d'accès au dossier:

npm config get prefix

Cd dans ce dossier

brew install dos2unix

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

convertit les fins de ligne en Unix au lieu de Dos

puis exécuter normalement avec: node mddir"../relative/chemin/".

Exemple généré démarque de la structure du fichier '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
18
répondu John Byrne 2017-10-28 04:48:48

comme déjà recommandé, vous pouvez utiliser tree . Mais pour l'utiliser avec du texte restructuré quelques paramètres supplémentaires étaient nécessaires.

la sortie standard tree ne sera pas imprimée si vous utilisez pandoc pour produire pdf.

tree --dirsfirst --charset=ascii /path/to/directory va produire un bel ASCII arbre qui peut être intégré dans votre document comme ceci: 

.. 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
13
répondu aronadaal 2016-05-27 08:36:33

j'ai scripté ceci pour ma liste de fichiers Dropbox.

sed est utilisé pour supprimer les chemins complets de fichier/chemin de dossier lié par un lien symbolique venant après ->

malheureusement, les onglets sont perdus. en utilisant zsh je peux préserver les onglets.

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

les sorties comme ceci: 

```
 .
├── 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
5
répondu guneysus 2014-12-27 17:31:54

je suggère d'utiliser wasabi alors vous pouvez soit utiliser le markdown-ish feel comme ceci 

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

et jetez cette syntaxe exacte à la bibliothèque js pour ce

wasabi example

4
répondu user3276552 2015-08-06 06:52:15

si vous utilisez Atom editor, vous pouvez l'accomplir par le paquet ASCII-tree .

vous pouvez écrire l'arbre suivant: 

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

et le convertir en ce qui suit en le sélectionnant et en appuyant sur ctrl-alt-t : 

root
├── dir1
│   └── file1
└── dir2
    └── file2
4
répondu Ramtin Soltani 2017-11-27 12:26:41

sous OSX, en utilisant reveal.js , j'ai un problème de rendu si je viens d'utiliser tree et puis copier/coller la sortie: symboles étranges apparaissent.

j'ai trouvé 2 solutions possibles.

1) utiliser charset ascii et simplement copier / coller la sortie dans le fichier markdown 

tree -L 1 --charset=ascii

2) Utiliser Directement HTML et unicode dans le fichier markdown 

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

J'espère que ça aidera.

1
répondu felix at housecat 2018-03-23 23:13:07

si vous souhaitez le générer dynamiquement, je vous recommande D'utiliser Frontend-md . Il est simple à utiliser.

1
répondu Bruno Wego 2018-05-23 06:24:05