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.

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.

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

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.

Si vous utilisez VS Code, il s'agit d'une extension géniale pour générer des arborescences de fichiers. https://marketplace.visualstudio.com/items?itemName=Shinotatwu-DS.file-tree-generator

Ajouté directement à la démarque ...

📦quakehunter
 ┣ 📂client
 ┣ 📂node_modules
 ┣ 📂server
 ┃ ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┗ 📜package.json

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

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

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

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

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.

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

Si vous souhaitez le générer dynamiquement, je vous recommande d'utiliser Frontend-md . C'est simple à utiliser.

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