¿Hay alguna forma de representar un árbol de directorios en un README.md de Github?

80

En mi documentación de repositorios de Githubs quiero representar una estructura de árbol de directorios como esta:

ingrese la descripción de la imagen aquí

¿Hay alguna manera de hacer eso con el markdown con sabor a Github, además de crearlo con arte ascii?

Básicamente, me gusta esta pregunta , pero me pregunto si hay una solución específica de github.

Oliver Matthews
fuente
2
Si está utilizando el editor Atom, puede usar este paquete para escribir fácilmente árboles ASCII: ascii-tree
Ramtin Soltani
Acabo de crear un proyecto con el mismo propósito. Es un script python3. github.com/prncvrm/Project-Structure Visita, prueba y haz problemas o bifurca.
príncipe

Respuestas:

30

No directamente, no. Tendrías que crearlo a mano y ponerlo tú mismo. Suponiendo que está usando un cuadro * nix localmente y está usando utf, entonces el árbol lo generará muy bien (creo que eso es lo que generó el ejemplo que usó anteriormente).

Suponiendo que te refieres a readme.mdcomo el objetivo de la documentación, creo que la única forma en que podrías automatizarlo sería un gancho de confirmación previa de git que se ejecutara treee incrustara en tu archivo Léame. Querría hacer una diferencia para asegurarse de que solo actualizó el archivo Léame si la salida cambia.

Otoh, si mantiene documentos separados a través de páginas de github, entonces lo que podría hacer es cambiar a usar jekyll (u otro generador) localmente y empujar las páginas estáticas usted mismo. Luego, podría implementar los cambios que desee, ya sea como un complemento / script de shell * / cambios manuales (si no varían mucho), o usar el mismo método que el anterior.

* Si lo integra en un enlace de confirmación, puede evitar agregar pasos adicionales para cambiar sus páginas.

Oliver Matthews
fuente
1
Gracias por la respuesta, pero eso no es lo que quise decir. Quería preguntar si hay una manera de representar un árbol de directorios en su archivo Léame (con anidación, etc.) y no generarlo. Edité la pregunta para mayor claridad.
¿Como en uno con enlaces como el que obtendría en apache si no tiene un index.html?
Oliver Matthews
No, lo que quiero decir es si hay una manera fácil de generar algo como esto: imgur.com/OHfWdLk en su archivo Léame.
3
En una Mac, puede instalar el treecomando con Homebrew , es decir brew install tree. Luego, desde el directorio que quería representar, ejecuté tree . >> tree.txty luego copié y edité el texto en mi archivo README.md. ¡Hice exactamente lo que necesitaba!
morfático
1
¿Por qué se acepta esta respuesta? Hay muchas buenas utilidades disponibles para hacer esto. No haga este manual. Mira esto. github.com/michalbe/md-file-tree
nagendra547
121

Conseguí resolver el problema de esta manera:

  1. Insertar comando treeen bash.

Ejemplo

ingrese la descripción de la imagen aquí

  1. Cree un README.md en el repositorio de github y copie el resultado de bash
  2. Insertar en el archivo .md dentro del código de rebajas

Ejemplo

ingrese la descripción de la imagen aquí 4. Vea el resultado y sea feliz =) ingrese la descripción de la imagen aquí

Jonathas BC
fuente
1
Aquí hay un ejemplo que puede copiar, lo encontré en github
Pietro Nadalini
1
Tenga en cuenta que en algunos casos, usar "` `` bash ... `` `" resaltará algunas de las palabras. En su lugar, puede utilizar la etiqueta "pre": "<pre> ... </pre>".
Liran Funaro
39

Escribí un pequeño guión que hace el truco:

#!/bin/bash

#File: tree-md

tree=$(tree -tf --noreport -I '*~' --charset ascii $1 |
       sed -e 's/| \+/  /g' -e 's/[|`]-\+/ */g' -e 's:\(* \)\(\(.*/\)\([^/]\+\)\):\1[\4](\2):g')

printf "# Project tree\n\n${tree}"

Ejemplo:

Comando de árbol original:

$ tree
.
├── dir1
│   ├── file11.ext
│   └── file12.ext
├── dir2
│   ├── file21.ext
│   ├── file22.ext
│   └── file23.ext
├── dir3
├── file_in_root.ext
└── README.md

3 directories, 7 files

Comando del árbol de rebajas:

$ ./tree-md .
# Project tree

.
 * [tree-md](./tree-md)
 * [dir2](./dir2)
   * [file21.ext](./dir2/file21.ext)
   * [file22.ext](./dir2/file22.ext)
   * [file23.ext](./dir2/file23.ext)
 * [dir1](./dir1)
   * [file11.ext](./dir1/file11.ext)
   * [file12.ext](./dir1/file12.ext)
 * [file_in_root.ext](./file_in_root.ext)
 * [README.md](./README.md)
 * [dir3](./dir3)

Resultado renderizado:

(Los enlaces no son visibles en Stackoverflow ...)

Árbol del proyecto
  • árbol-md
  • dir2
    • file21.ext
    • file22.ext
    • file23.ext
  • dir1
    • file11.ext
    • file12.ext
  • file_in_root.ext
  • README.md
  • dir3
Simón
fuente
¡Qué gran idea! Manteniendo mis minutos en git y ahora puedo actualizar el README TOC fácilmente. ¡Gracias! ¿Pensaste en hacerlo más configurable?
berezovskyi
1
Además, sugiera este paquete de nodejs por @michalbe github.com/michalbe/md-file-tree
mikequentel
¿Hay alguna forma de limitar la profundidad del árbol?
Sami-L
1
¡¡Esto no funcionó para mac. !! Usé brew install tree para instalar el árbol.
nagendra547
Amigo ... esto es encantador
Carl Boneri
15

Hice un módulo de nodo para automatizar esta tarea: mddir

Uso

nodo mddir "../relative/path/"

Para instalar: npm install mddir -g

Para generar rebajas para el directorio actual: mddir

Para generar para cualquier ruta absoluta: mddir / absoluta / ruta

Para generar una ruta relativa: mddir ~ / Documentos / lo que sea.

El archivo md se genera en su directorio de trabajo.

Actualmente ignora las carpetas node_modules y .git.

Solución de problemas

Si recibe el error 'node \ r: No such file or directory', el problema es que su sistema operativo usa diferentes finales de línea y mddir no puede analizarlos sin que usted establezca explícitamente el estilo de final de línea en Unix. Esto suele afectar a Windows, pero también a algunas versiones de Linux. La configuración de los finales de línea al estilo Unix debe realizarse dentro de la carpeta bin global mddir npm.

Corrección de finales de línea

Obtenga la ruta de la carpeta npm bin con:

npm config get prefix

Cd en esa carpeta

brew instalar dos2unix

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

Esto convierte los finales de línea a Unix en lugar de Dos

Luego ejecute normalmente con: node mddir "../relative/path/".

Ejemplo de estructura de archivo de rebajas generada '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
John Byrne
fuente
Gracias por el paquete de nodos. Un par de comentarios 1) ¿Existe una opción para obtener la salida como texto en lugar de como JSON? Tuve que analizar más la salida JSON antes de poder pegarla en la rebaja. 2) ¿Hay alguna forma de hacerlo para que no tenga que ejecutarlo desde el node_modules/mddir/src/directorio? Por ejemplo, me gustaría ejecutar node ~./src > dir-struct.txtdesde el directorio de mi proyecto y pegar el contenido de dir-struct.txt directamente en mi markdown.
wilblack
11

La mejor manera de hacer esto es rodear su árbol con las comillas triples para indicar un bloque de código. Para obtener más información, consulte los documentos de Markdown: http://daringfireball.net/projects/markdown/syntax#code

Joe Sepi
fuente
Diferente de lo que pidió el OP, pero exactamente el consejo que necesitaba. ¡Gracias!
Mike Ellis
3

Puede usar etiquetas <pre> como lo hice en uno de mis proyectos .

borngeek
fuente
¿En qué se diferencia esto de lo que mencionó el OP?
Andrei Matracaru
3

También puede consultar este árbol extendido paquete . Se puede utilizar como una aplicación de línea de comandos mediante el nodo> = 6.x.

Es muy similar treepero también tiene la opción de configurar el máximo en lo profundo del árbol, esa es una de las cosas horribles que tiene. También puedes filtrar usando .gitignorefile.

ingrese la descripción de la imagen aquí

Raúl Otaño
fuente
1
nota para los demás: para convertir algo como esto en rebajas, solo incluye las tres comillas invertidas.
user45254
3

Ninguna de las soluciones anteriores me funcionó completamente en mi mac.

La mejor solución que encontré es usar la utilidad creada aquí.

https://github.com/michalbe/md-file-tree

Una vez que haya instalado la utilidad npm install md-file-tree -g, simplemente puede ejecutar para obtener el árbol de todos los archivos

md-file-tree . > README.md
nagendra547
fuente
3

Aquí hay un útil git aliasque me funciona.

git config --global alias.tree '! git ls-tree --full-name --name-only -t -r HEAD | sed -e "s/[^-][^\/]*\//   |/g" -e "s/|\([^ ]\)/|-- \1/"'

Aquí está la salida de git tree

jonavon@XPS13:~/projects/roman-numerals$ git tree
.gitignore
pom.xml
src
   |-- main
   |   |-- java
   |   |   |-- com
   |   |   |   |-- foxguardsolutions
   |   |   |   |   |-- jonavon
   |   |   |   |   |   |-- AbstractFile.java
   |   |   |   |   |   |-- roman
   |   |   |   |   |   |   |-- Main.java
   |   |   |   |   |   |   |-- Numeral.java
   |   |   |   |   |   |   |-- RomanNumberInputFile.java
   |   |   |   |   |   |   |-- RomanNumeralToDecimalEvaluator.java
   |-- test
   |   |-- java
   |   |   |-- com
   |   |   |   |-- foxguardsolutions
   |   |   |   |   |-- jonavon
   |   |   |   |   |   |-- roman
   |   |   |   |   |   |   |-- InterpretSteps.java
   |   |   |   |   |   |   |-- RunCukesTest.java
   |   |-- resources
   |   |   |-- com
   |   |   |   |-- foxguardsolutions
   |   |   |   |   |-- jonavon
   |   |   |   |   |   |-- roman
   |   |   |   |   |   |   |-- Interpret.feature
   |   |   |-- sample-input.txt

El treecomando comparable

jonavon@XPS13:~/projects/roman-numerals$ tree -n
.
├── pom.xml
├── src
│   ├── main
│   │   └── java
│   │       └── com
│   │           └── foxguardsolutions
│   │               └── jonavon
│   │                   ├── AbstractFile.java
│   │                   └── roman
│   │                       ├── Main.java
│   │                       ├── Numeral.java
│   │                       ├── RomanNumberInputFile.java
│   │                       └── RomanNumeralToDecimalEvaluator.java
│   └── test
│       ├── java
│       │   └── com
│       │       └── foxguardsolutions
│       │           └── jonavon
│       │               └── roman
│       │                   ├── InterpretSteps.java
│       │                   └── RunCukesTest.java
│       └── resources
│           ├── com
│           │   └── foxguardsolutions
│           │       └── jonavon
│           │           └── roman
│           │               └── Interpret.feature
│           └── sample-input.txt
└── target
    ├── classes
    │   └── com
    │       └── foxguardsolutions
    │           └── jonavon
    │               ├── AbstractFile.class
    │               └── roman
    │                   ├── Main.class
    │                   ├── Numeral.class
    │                   ├── RomanNumberInputFile.class
    │                   └── RomanNumeralToDecimalEvaluator.class
    ├── generated-sources
    │   └── annotations
    └── maven-status
        └── maven-compiler-plugin
            └── compile
                └── default-compile
                    ├── createdFiles.lst
                    └── inputFiles.lst

30 directories, 17 files

Claramente, el árbol tiene una mejor salida, pero me gustaría que usara mi archivo .gitignore. Para que mi contenido compilado no se muestre

Jonavon
fuente
1

Un treecomando simple hará el trabajo. Por ejemplo: tree -o readme.mdimprimirá la estructura de árbol de su directorio de trabajo actual y la escribirá readme.md. Luego, abra el archivo readme.md en uno de los editores de texto como Sublime y envuelva su contenido dentro de un par de comillas triples (`` '').

Para su información: es posible que deba elaborar un árbol de instalación en OSX si aún no está instalado. En Linux y Windows debería funcionar bien. También en Windows, es posible que deba reemplazar el guión con una barra inclinada.

Espero que esto ayude.

Gyan
fuente
1

Si está trabajando en Windows, escriba tree /fdentro del directorio que desea lograr en el símbolo del sistema. Esto debería hacer tu trabajo. puede copiar y pegar la salida en la rebaja rodeada de mis tres tics posteriores, es decir, '' '{estructura de árbol aquí}' '

Parikshit Singh
fuente
0

Solo me gusta generarlo con UTF-8 y vincularlo a cada archivo y carpeta para navegar con mucha facilidad. Por favor, mire el ejemplo aquí .

El archivo de rebajas denerado

Деян Добромиров
fuente
En cambio, si lo vota en contra. Dime qué información adicional necesitas. Puede generar una rebaja como desee. Lo hago con mi propia biblioteca personal, pero mi preferencia puede ser diferente a la tuya.
Деян Добромиров
0

Para aquellos que quieren una solución rápida:

Hay una forma de obtener una salida en la consola similar a la salida del árbol, escribiendo el siguiente comando en su terminal:

ls -R YOURFOLDER | grep ':$' | sed -e 's/:$//' -e 's/[^\/]*\//|  /g' -e 's/|  \([^|]\)/|–– \1/g' 

Esta alternativa se menciona en esta documentación: https://wiki.ubuntuusers.de/tree/

Luego, la salida se puede copiar y encapsular dentro de un archivo .md con tics de retroceso de bloque de código, como se menciona en la respuesta de Jonathas BC.

Pero tenga en cuenta que también genera todas las carpetas de módulos de nodo en un proyecto de nodo. Y en el árbol puedes hacer algo como

tree -I node_modules

para excluir la carpeta de módulos de nodo.

vindom
fuente
0

Inserte el árbol de comandos en bash.

Además, hay un comando de DOS y un "árbol". Puede mostrar rutas de directorio y archivos en cada subdirectorio con el comando:

tree /F

https://web.csulb.edu/~murdock/tree.html

BorisV
fuente