web-dev-qa-db-fra.com

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

Je veux décrire la structure des répertoires et des fichiers dans certains des messages de mon blog Jekyll. Markdown fournit-il un moyen astucieux de produire une telle chose?

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

.
├── _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 en Unicode (comme décrit dans cette réponse ici), mais je ne sais pas comment Markdown ou différent les navigateurs vont les gérer. J'espérais que Markdown avait inclus un moyen de faire cela qui affiche peut-être les caractères Unicode ci-dessus.

unicodemarkdownjekyll
158
Matt Rowles

Si vous êtes préoccupé par les caractères Unicode, vous pouvez utiliser ASCII pour construire les structures. 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 format est similaire au format utilisé par tree si vous sélectionnez la sortie ANSI.

111
RobertKenny

J'ai suivi un exemple dans n autre référentiel et ai enveloppé la structure de répertoires 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
```
180
user799188

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

32
Cameron Spickert

J'ai créé un module de nœud pour automatiser cette tâche: mddir

Usage

noeud mddir "../relative/path/"

Pour installer: npm install mddir -g

Pour générer un démarquage pour le répertoire en cours: mddir

Pour générer un chemin absolu quelconque: mddir/absolute/path

Pour générer un chemin relatif: mddir ~/Documents/what.

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

Ignore actuellement les dossiers node_modules et .git.

Dépannage

Si vous recevez l'erreur 'noeud\r: Aucun fichier ou répertoire de ce type', le problème est que votre système d'exploitation utilise différentes fins de ligne et que mddir ne peut pas les analyser sans que vous ayez défini 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 de mddir npm.

Correction des fins de ligne

Obtenez le chemin du dossier bin npm avec:

npm config get prefix

Cd dans ce dossier

brasser installer dos2unix

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

Ceci 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émarquage 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
20
John Byrne

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 sortie standard tree ne sera pas imprimée si vous utilisez pandoc pour produire un fichier PDF.

tree --dirsfirst --charset=ascii /path/to/directory produira un bel arbre ASCII pouvant être intégré à 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
15
aronadaal

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

sed est utilisé pour supprimer les chemins complets des chemins de fichiers/dossiers liés par un lien symbolique après ->

Malheureusement, les onglets sont perdus. En utilisant zsh je suis capable 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 aiment 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
6
guneysus

Sous OSX, en utilisant reveal.js, j'ai un problème de rendu si je viens d'utiliser tree puis de copier/coller le résultat: 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émarques

tree -L 1 --charset=ascii

2) Utiliser directement HTML et Unicode dans le fichier de démarques

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

5
felix at housecat

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

Vous pouvez écrire l'arbre suivant:

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

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

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

Je suggérerais d'utiliser wasabi alors vous pouvez utiliser la sensation de marke-ish 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 this

wasabi example

4
user3276552

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 à markdown ...

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

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

1
Bruno Wego