Представление структуры каталогов и файлов в синтаксисе уценки


216

Я хочу описать структуру каталогов и файлов в некоторых моих сообщениях в блоге Jekyll. Предоставляет ли Markdown удобный способ вывода такой вещи?

Например, по этой ссылке на веб-сайте Jekyll вы можете видеть, что структура каталогов и файлов выводится на страницу очень аккуратно:

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

Я полагаю, что символы блока строк выше - это Unicode (как описано в этом ответе здесь ), но я не уверен, как Markdown или другие браузеры будут их обрабатывать. Я надеялся, что Markdown включил какой-то способ сделать это, что, возможно, выводит в качестве символов Unicode выше.



1
так как вы упомянули Jekyll конкретно, этот пример без пуха и его источник могли бы
отвечать всем требованиям

Ответы:


144

Если вас интересуют символы Юникода, вы можете использовать ASCII для построения структур, поэтому ваш пример структуры становится

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

Который похож на формат treeиспользует, если вы выбираете ANSIвыход.


1
Спасибо за это. Должны ли быть какие-либо опасения по поводу использования символов Unicode? Например, известные проблемы со старыми браузерами, некорректный рендеринг Markdown и т. Д.
Мэтт Роулз,

2
Там не должно быть никаких проблем с Markdown, это будет на ваших шаблонах Jekyll и веб-браузерах пользователей.
RobertKenny

1
Другое преимущество этого выбора - меньшие различия по сравнению с другими вариантами, которые используют разные символы только для косметических целей (например, вывод tree).
villasv

1
При использовании этого anwser дерево просто отображается в виде нескольких текстовых строк. Протестировано в VSCode и VisualStudio с плагином md. Также на GitHub это не работает
Дэнни

240

Я последовал примеру в другом репозитории и обернул структуру каталогов в пару тройных обратных галочек ( ```):

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

5
Переполнение стека не поддерживает более новый синтаксис тройного обратного удара; это интерпретирует их как одиночные обратные помехи. Одиночные обратные метки помечают код как встроенный текст, только в пределах одной строки; Вот почему ваш пример имеет белые полосы между каждой строкой. Для совместимого способа разметки многострочного кода сделайте отступ текста на четыре пробела.
Рори О'Кейн

3
Хотя SO не поддерживает тройной обратный трюк, большинство других реализаций MD поддерживают (например, Github / BitBucket), и это был единственный способ, с помощью которого я мог получить дерево, работающее с комментариями относительно каждой записи. Итак .. +1 отсюда!
Скотт Байерс

1
Недурно за этот ответ. Уценка Triple Backticks работает для меня и на Wordpress.
Бинита Бхарати

Поддержка Triple-Backtick теперь работает на SO.
StriplingWarrior

41

Вы можете использовать дерево, чтобы сгенерировать что-то очень похожее на ваш пример. Получив выходные данные, вы можете заключить их в <pre>тег, чтобы сохранить форматирование простого текста.


Круто, это выглядит полезным, спасибо! Но как насчет теоретических файловых структур? Если это единственное решение на данный момент, я думаю, мне просто нужно скопировать и вставить нужные мне символы. Ура снова.
Мэтт Роулз

Мне нравится это решение. Посмотрите аккуратно в Markdown
Ань Туан

28

Если вы используете VS Code, это отличное расширение для генерации файловых деревьев. https://marketplace.visualstudio.com/items?itemName=Shinotatwu-DS.file-tree-generator

Добавлено прямо в уценку ...

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

Это потрясающе.
Steph M

22

Я сделал модуль узла для автоматизации этой задачи: mddir

использование

узел mddir "../relative/path/"

Для установки: npm установите mddir -g

Чтобы создать уценку для текущего каталога: mddir

Чтобы сгенерировать для любого абсолютного пути: mddir / absolute / path

Чтобы сгенерировать относительный путь: mddir ~ / Documents / what.

MD-файл генерируется в вашем рабочем каталоге.

В настоящее время игнорирует node_modules и папки .git.

Исправление проблем

Если вы получаете сообщение об ошибке «узел \ r: нет такого файла или каталога», проблема заключается в том, что ваша операционная система использует разные окончания строк, и mddir не сможет их проанализировать, если вы явно не зададите стиль окончания строк в Unix. Обычно это влияет на Windows, но также и на некоторые версии Linux. Установка конца строки в стиле Unix должна выполняться в глобальной папке bin mddir npm.

Исправление концов строки

Получить путь к папке npm bin с помощью:

npm config get prefix

Компакт-диск в эту папку

заварить установить dos2unix

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

Это преобразует окончания строк в Unix вместо Dos

Затем запустите как обычно с: node mddir "../relative/path/".

Пример сгенерированной структуры файла уценки '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
К сожалению, я попробовал это, и это не работает на моей машине с Windows 10, и кажется, что проект был заброшен.
Рич Хопкинс

1
Привет, спасибо, что попробовал библиотеку. Я был занят на других проектах и ​​не могу копировать, но нашел возможное решение. Получить путь к папке npm bin с помощью: 'npm config get prefix'. Перейдите в эту папку, затем запустите «brew install dos2unix», запустите «dos2unix lib / node_modules / mddir / src / mddir.js». Это преобразует окончания строк в Unix вместо Dos. Затем запустите как обычно с: node mddir "../relative/path/".
Джон Бирн

Работал на моей машине с Windows 10, аккуратная маленькая утилита - спасибо!
Джон Каттенхорн

19

Как уже рекомендовано, вы можете использовать tree. Но для использования его вместе с реструктурированным текстом потребовались дополнительные параметры.

Стандартный treeвывод не будет напечатан, если вы используете pandocдля создания PDF.

tree --dirsfirst --charset=ascii /path/to/directoryсоздаст красивое ASCIIдерево, которое может быть интегрировано в ваш документ следующим образом:

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

Я написал это для своего списка файлов Dropbox.

sed используется для удаления полных путей пути к файлу / папке с символической ссылкой после ->

К сожалению, вкладки потеряны. Используя zshя могу сохранить вкладки.

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

Выходы как это:

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

Если вы используете редактор Atom, вы можете сделать это с помощью пакета ascii-tree .

Вы можете написать следующее дерево:

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

и преобразовать его в следующее, выбрав его и нажав ctrl-alt-t:

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

5

При использовании OSX reveal.jsу меня возникает проблема рендеринга, если я просто использую пользователь, treeа затем копирую / вставляю вывод: появляются странные символы.

Я нашел 2 возможных решения.

1) Используйте кодировку ascii и просто скопируйте / вставьте вывод в файл уценки

tree -L 1 --charset=ascii

2) Используйте непосредственно HTML и Unicode в файле уценки

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

Надеюсь, поможет.


4

Я бы посоветовал использовать васаби, тогда вы можете либо использовать markdown-ish так

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

и бросить этот точный синтаксис в библиотеке JS для этого

пример васаби


1

Если вы хотите генерировать его динамически, я рекомендую использовать Frontend-md . Это просто в использовании.


1

Для этого есть модуль NPM:

нпм дри

Это позволяет вам иметь представление дерева каталогов в виде строки или объекта. Использование его с командной строкой позволит вам сохранить представление в текстовом файле.

Пример:

$ npm dree parse myDirectory --dest ./generated --name tree
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.