Представлення каталогу та структури файлів у синтаксисі Markdown


215

Я хочу описати структури каталогів і файлів у деяких своїх публікаціях блогу Джекілла, чи 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 або різні веб-переглядачі будуть справлятися з ними. Я сподівався, що Маркдаун включив якийсь спосіб зробити це, який, можливо, видає символи Unicode.



1
оскільки ви конкретно згадали про jekyll, цей приклад без пуху та його джерело може відповідати законопроекту
user3276552

Відповіді:


144

Якщо вас турбують символи Unicode, ви можете використовувати 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
При використанні цього анвеса дерево відображається лише декількома рядками тексту. Тестується в VSCode та VisualStudio з плагіном md. Також на GitHub це не працює
Денні

237

Я наслідував приклад в іншому сховищі і загорнув структуру каталогів у пару потрійних backticks ( ```):

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

5
Переповнення стека не підтримує новіший синтаксис потрійного зворотного тла; він трактує їх як окремі бекстейки. Одні задні позначки коду позначають як вбудований текст, лише в одному рядку; тому ваш приклад має білі смуги між кожним рядком. Для сумісного способу розмітки багаторядкового коду вставте відступ тексту чотирма пробілами.
Rory O'Kane

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

1
Великі пальці для цієї відповіді. Потрійна відмітка задніх позицій працює для мене і на Wordpress.
Бініта Бхараті

Підтримка підтримки Triple-backtick зараз працює на SO.
Стриптинг-воїн

41

Ви можете використовувати дерево для створення чогось дуже схожого на ваш приклад. Щойно у вас є вихід, ви зможете загорнути його в <pre>тег, щоб зберегти звичайне форматування тексту.


Класно, це виглядає корисно дякую! А як щодо теоретичних файлових структур? Якщо це єдине рішення на даний момент, я думаю, я можу просто скопіювати та вставити потрібні мені символи. Знов ура.
Метт Роулз

Мені подобається це рішення. Подивіться акуратно в Маркдаун
Анх Туан

27

Якщо ви використовуєте код VS, це дивовижне розширення для генерування дерев файлів. https://marketplace.visualstudio.com/items?itemName=Shinotatwu-DS.file-tree-generator

Додано безпосередньо до розмітки ...

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

22

Я зробив модуль вузла для автоматизації цього завдання: mddir

Використання

вузол mddir "../relative/path/"

Щоб встановити: npm встановіть mddir -g

Для створення розмітки для поточного каталогу: mddir

Для генерації будь-якого абсолютного шляху: mddir / absolut / path

Для генерації відносного шляху: mddir ~ / Документи / що завгодно.

Файл md генерується у вашому робочому каталозі.

В даний час ігнорує node_modules та .git папки.

Вирішення проблем

Якщо ви отримуєте помилку "вузол \ r: такого файлу чи каталогу немає", проблема полягає в тому, що ваша операційна система використовує різні закінчення рядків, і mddir не може їх розібрати, не чітко встановивши стиль закінчення рядка в Unix. Зазвичай це стосується Windows, але також і деяких версій Linux. Встановлення закінчень рядків у стилі Unix має виконуватися в глобальній папці бін mddir npm.

Виправити закінчення рядків

Отримайте шлях до папки npm bin за допомогою:

npm config get prefix

CD у цю папку

варити встановити 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'. Cd у цю папку, потім запустіть 'варити встановити 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

7

Якщо ви використовуєте редактор Atom, ви можете це зробити за допомогою пакета ascii-дерева .

Ви можете написати таке дерево:

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

і перетворити його в наступне, вибравши його та натиснувши ctrl-alt-t:

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

5

Під OSX, використовуючи reveal.js, у мене виникла проблема візуалізації, якщо я просто користувач, treeа потім скопіювати / вставити вихід: з'являються дивні символи.

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

1) Використовуйте ascii charset і просто скопіюйте / вставте висновок у файл розмітки

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

Я б запропонував використати wasabi, тоді ви можете або використати відмітку-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

Це дозволяє представити дерево каталогів як рядка або об'єкта. Використання його за допомогою командного рядка дозволить зберегти представлення у файлі txt.

Приклад:

$ npm dree parse myDirectory --dest ./generated --name tree
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.