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


216

Je veux décrire les structures de répertoires et de fichiers dans certains de mes articles de blog Jekyll, Markdown offre-t-il une manière soignée de produire une telle chose?

Par exemple, vous pouvez voir sur ce lien sur le site Web de Jekyll que la structure des répertoires et des fichiers est très bien affichée sur la page:

.
├── _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 je ne sais pas comment Markdown ou différents navigateurs les traiteront. J'espérais que Markdown avait inclus un moyen de le faire qui produirait peut-être les caractères Unicode ci-dessus.


3
Cela a été discuté sur Meta à Y
Dan Dascalescu

1
puisque vous avez mentionné jekyll spécifiquement, cet exemple sans fioritures et sa source pourraient convenir
user3276552

Réponses:


144

Si vous êtes préoccupé par les caractères Unicode, vous pouvez utiliser ASCII pour créer 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

Ce qui est similaire au format treeutilisé si vous sélectionnez la ANSIsortie.


1
Merci pour cela. Devrait-il y avoir des inquiétudes quant à l'utilisation des caractères Unicode? Tels que des problèmes connus avec des navigateurs plus anciens, un rendu Markdown incorrect, etc.
Matt Rowles

2
Il ne devrait pas y avoir de problème avec Markdown, il se trouvera sur vos modèles Jekyll et les navigateurs Web des utilisateurs.
RobertKenny

1
Un autre avantage de ce choix est les différences plus petites par rapport aux autres choix qui utilisent différents symboles pour des raisons cosmétiques uniquement (comme la sortie de tree).
villasv

1
Lorsque vous utilisez cette réponse, l'arbre est simplement rendu en quelques lignes de texte. Testé en VSCode et VisualStudio avec le plugin md. Également sur GitHub, cela ne fonctionne pas
Danny

240

J'ai suivi un exemple dans un autre référentiel et j'ai encapsulé la structure du répertoire dans une paire de triples backticks ( ```):

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

5
Stack Overflow ne prend pas en charge la nouvelle syntaxe triple-backtick; il les interprète comme des simples backticks. Les crochets simples marquent le code en tant que texte en ligne, uniquement sur une seule ligne; c'est pourquoi votre exemple a des rayures blanches entre chaque ligne. Pour un moyen compatible de baliser le code multiligne, indentez le texte de quatre espaces.
Rory O'Kane

3
Bien que SO ne prenne pas en charge le triple backtick, la plupart des autres implémentations de MD le font (comme Github / BitBucket) et c'était la seule façon de faire fonctionner une arborescence contenant des commentaires en ligne sur ce que chaque entrée était. Alors .. +1 d'ici!
Scott Byers

1
Bravo pour cette réponse. Le démarque triple backticks fonctionne aussi pour moi sur Wordpress.
Binita Bharati

La prise en charge du triple backtick semble fonctionner sur SO maintenant.
StriplingWarrior

41

Vous pouvez utiliser l' arborescence 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 <pre>balise pour conserver la mise en forme du texte brut.


Cool, cela semble utile merci! Mais qu'en est-il des structures de fichiers théoriques? Si c'est la seule solution pour le moment, je suppose que je devrais peut-être simplement copier et coller les caractères dont j'ai besoin. Bravo encore.
Matt Rowles

J'aime cette solution. Regardez bien dans Markdown
Anh Tuan


22

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

Usage

noeud mddir "../relative/path/"

Pour installer: npm install mddir -g

Pour générer une démarque pour le répertoire actuel: mddir

Pour générer pour tout chemin absolu: mddir / absolu / chemin

Pour générer un chemin relatif: mddir ~ / Documents / que ce soit.

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

Ignore actuellement les modules node_modules et .git.

Dépannage

Si vous recevez l'erreur «nœud \ r: aucun fichier ou répertoire», le problème est que votre système d'exploitation utilise différentes fins de ligne et mddir ne peut pas les analyser sans que vous définissiez explicitement le style de fin de ligne sur Unix. Cela affecte généralement Windows, mais aussi certaines versions de Linux. La définition des fins de ligne sur le style Unix doit être effectuée dans le dossier bin global mddir npm.

Correction des fins de ligne

Obtenez le chemin du dossier bin npm avec:

npm config get prefix

Cd dans ce dossier

installer brew dos2unix

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

Cela convertit les fins de ligne en Unix au lieu de Dos

Exécutez ensuite normalement avec: node mddir "../relative/path/".

Exemple de structure de fichier de démarque générée '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
Malheureusement, j'ai essayé cela, et cela ne fonctionne pas sur ma machine Windows 10, et il semble que le projet ait été abandonné.
Rich Hopkins

1
Salut, merci d'avoir essayé la bibliothèque. J'ai été occupé sur d'autres projets et je ne peux pas répliquer mais j'ai trouvé un correctif possible. Obtenez le chemin du dossier bin npm avec: 'npm config get prefix'. Cd dans ce dossier, puis exécutez «brew install dos2unix», exécutez «dos2unix lib / node_modules / mddir / src / mddir.js». Cela convertit les fins de ligne en Unix au lieu de Dos. Exécutez ensuite normalement avec: node mddir "../relative/path/".
John Byrne

Fonctionné sur ma machine Windows 10, petit utilitaire soigné - merci!
John Kattenhorn

19

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

La treesortie standard ne sera pas imprimée si vous l'utilisez pandocpour produire un pdf.

tree --dirsfirst --charset=ascii /path/to/directoryproduira un joli ASCIIarbre 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

8

J'ai écrit ceci pour ma liste de fichiers Dropbox.

sed est utilisé pour supprimer les chemins d'accès complets des chemins de fichiers / dossiers liés entre eux après ->

Malheureusement, les onglets sont perdus. En utilisant zshje suis en mesure de conserver 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

8

Si vous utilisez l'éditeur Atom, vous pouvez le faire avec le package ascii-tree .

Vous pouvez écrire l'arborescence suivante:

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

et convertissez-le comme suit en le sélectionnant et en appuyant sur ctrl-alt-t:

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

5

Sous OSX, en utilisant reveal.js, j'ai un problème de rendu si je ne fais qu'utiliser treepuis copier / coller la sortie: des symboles étranges apparaissent.

J'ai trouvé 2 solutions possibles.

1) Utilisez charset ascii et copiez / collez simplement la sortie dans le fichier de démarque

tree -L 1 --charset=ascii

2) Utilisez directement HTML et unicode dans le fichier de démarque

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


4

Je suggérerais d'utiliser le wasabi, alors vous pouvez utiliser la sensation de démarque 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 jeter cette syntaxe exacte à la bibliothèque js pour cette

exemple de wasabi



1

Il existe un module NPM pour cela:

npm dree

Il vous permet d'avoir une représentation d'une arborescence de répertoires sous forme de chaîne ou d'objet. Son utilisation avec la ligne de commande vous permettra d'enregistrer la représentation dans un fichier txt.

Exemple:

$ npm dree parse myDirectory --dest ./generated --name tree
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.