เป็นตัวแทนของไดเรกทอรีและโครงสร้างไฟล์ในไวยากรณ์ Markdown


215

ฉันต้องการอธิบายโครงสร้างไดเรกทอรีและไฟล์ในบางส่วนของโพสต์บล็อกของ 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

ฉันเชื่อว่าตัวละคร line block ข้างต้นเป็น Unicode (ตามที่อธิบายไว้ในคำตอบนี้ที่นี่ ) แต่ฉันไม่แน่ใจว่า Markdown หรือเบราว์เซอร์อื่นจะจัดการกับพวกเขาอย่างไร ฉันหวังว่า 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 ไม่ถูกต้อง ฯลฯ
Matt Rowles

2
ไม่ควรมีปัญหาใด ๆ กับ Markdown มันจะเกิดขึ้นกับแม่แบบ Jekyll และเว็บเบราว์เซอร์ผู้ใช้ของคุณ
RobertKenny

1
ข้อดีอีกประการของตัวเลือกนี้คือความแตกต่างที่เล็กกว่าเมื่อเปรียบเทียบกับตัวเลือกอื่น ๆ ที่ใช้สัญลักษณ์ที่แตกต่างกันสำหรับเหตุผลด้านความงามเท่านั้น (เช่นผลลัพธ์จากtree)
villasv

1
เมื่อใช้ anwser นี้ต้นไม้จะแสดงผลเป็นบรรทัดข้อความเพียงไม่กี่บรรทัด ทดสอบใน VSCode และ VisualStudio พร้อมปลั๊กอิน md ใน GitHub สิ่งนี้ก็ไม่ทำงานเช่นกัน
Danny

238

ฉันติดตามตัวอย่างในที่เก็บอื่นและหุ้มโครงสร้างไดเรกทอรีไว้ภายในคู่แบ็คคริปต์ ( ```):

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

5
Stack Overflow ไม่รองรับซินแท็กซ์ของ Triple-Backtick ที่ใหม่กว่า; มันตีความพวกเขาเป็น backticks เดียว backticks เดียวทำเครื่องหมายรหัสเป็นข้อความแบบอินไลน์ภายในบรรทัดเดียวเท่านั้น นั่นเป็นสาเหตุที่ตัวอย่างของคุณมีแถบสีขาวระหว่างแต่ละบรรทัด สำหรับวิธีที่เข้ากันได้ในการทำเครื่องหมายรหัสหลายบรรทัดเยื้องข้อความด้วยช่องว่างสี่ช่อง
Rory O'Kane

3
ในขณะที่ SO ไม่สนับสนุนทริปติค backtick แต่การใช้งาน MD อื่น ๆ ส่วนใหญ่ทำ (เช่น Github / BitBucket) และนี่เป็นวิธีเดียวที่ฉันจะได้ต้นไม้ทำงานที่มีความคิดเห็นแบบอินไลน์ว่าแต่ละรายการคืออะไร ดังนั้น .. +1 จากที่นี่!
Scott Byers

1
ยกนิ้วให้สำหรับคำตอบนี้ การ backticks สามครั้งทำงานได้ดีสำหรับฉันใน Wordpress เช่นกัน
Binita Bharati

การสนับสนุน Triple-backtick ดูเหมือนจะทำงานบน SO ทันที
StriplingWarrior

41

คุณสามารถใช้แผนภูมิเพื่อสร้างสิ่งที่คล้ายกับตัวอย่างของคุณ เมื่อคุณมีเอาต์พุตคุณสามารถปิดมันใน<pre>แท็กเพื่อคงรูปแบบข้อความธรรมดาไว้


เยี่ยมเลยขอบคุณมาก! แต่สิ่งที่เกี่ยวกับโครงสร้างไฟล์เชิงทฤษฎี? หากนี่เป็นทางออกเดียวในตอนนี้ฉันคิดว่าฉันอาจต้องคัดลอกและวางอักขระที่ฉันต้องการ ไชโยอีกครั้ง
Matt Rowles

ฉันชอบวิธีนี้ ดูเรียบร้อยใน Markdown
Anh Tuan

27

หากคุณใช้ VS Code นี่เป็นส่วนเสริมที่ยอดเยี่ยมสำหรับการสร้างแผนผังไฟล์ https://marketplace.visualstudio.com/items?itemName=Shinotatwu-DS.file-tree-generator

เพิ่มโดยตรงไปยัง markdown ...

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

22

ฉันทำโมดูลโหนดเพื่อทำงานนี้โดยอัตโนมัติ: mddir

การใช้

โหนด mddir "../relative/path/"

ในการติดตั้ง: npm install mddir -g

เพื่อสร้าง markdown สำหรับไดเรกทอรีปัจจุบัน: mddir

หากต้องการสร้างสำหรับพา ธ สัมบูรณ์ใด ๆ : mddir / absolute / path

เพื่อสร้างสำหรับเส้นทางสัมพัทธ์: mddir ~ / Documents / any

ไฟล์ md ถูกสร้างขึ้นในไดเรกทอรีทำงานของคุณ

ปัจจุบันละเว้น node_modules และ. git โฟลเดอร์

การแก้ไขปัญหา

หากคุณได้รับข้อผิดพลาด 'node \ r: ไม่มีไฟล์หรือไดเรกทอรีดังกล่าว' ปัญหาคือระบบปฏิบัติการของคุณใช้การลงท้ายบรรทัดที่แตกต่างกันและ mddir ไม่สามารถแยกวิเคราะห์ได้โดยที่คุณไม่ต้องกำหนดสไตล์การสิ้นสุดของบรรทัดเป็น Unix อย่างชัดเจน โดยปกติจะมีผลกับ Windows แต่ยังมี Linux บางเวอร์ชัน การตั้งค่าการสิ้นสุดบรรทัดเป็นสไตล์ Unix ต้องดำเนินการภายในโฟลเดอร์ bin ส่วนกลาง mddir npm

การแก้ไขจุดสิ้นสุดของบรรทัด

รับพา ธ โฟลเดอร์ถังขยะ npm ด้วย:

npm config get prefix

ซีดีลงในโฟลเดอร์นั้น

ชงติดตั้ง dos2unix

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

สิ่งนี้จะแปลงจุดสิ้นสุดบรรทัดเป็น Unix แทนที่จะเป็น Dos

จากนั้นรันตามปกติด้วย: node mddir "../relative/path/"

ตัวอย่างโครงสร้างไฟล์ markdown ที่สร้างขึ้น '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 ของฉันและดูเหมือนว่าโครงการจะถูกยกเลิก
Rich Hopkins

1
สวัสดีขอบคุณที่ทดลองใช้ห้องสมุด ฉันกำลังยุ่งอยู่กับโครงการอื่นและไม่สามารถทำซ้ำได้ แต่ได้พบการแก้ไขที่เป็นไปได้ รับพา ธ โฟลเดอร์ถังขยะ npm ด้วย: 'npm config get prefix' ซีดีลงในโฟลเดอร์นั้นจากนั้นเรียกใช้ 'ชงติดตั้ง dos2unix' เรียกใช้ 'dos2unix lib / node_modules / mddir / src / mddir.js' สิ่งนี้จะแปลงจุดสิ้นสุดบรรทัดเป็น Unix แทนที่จะเป็น Dos จากนั้นรันตามปกติด้วย: node mddir "../relative/path/"
John Byrne

ทำงานบนเครื่อง Windows 10 ของฉันอรรถประโยชน์เล็ก ๆ น้อย ๆ ที่เรียบร้อย - ขอบคุณ!
John Kattenhorn

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 ใช้สำหรับลบเส้นทางแบบเต็มของเส้นทางไฟล์ / โฟลเดอร์ symlinked ที่ตามมา ->

น่าเสียดายที่แท็บหายไป การใช้zshฉันสามารถรักษาแท็บ

! / usr / bin / env ทุบตี

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

คุณสามารถเขียนแผนผังต่อไปนี้:

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

และแปลงเป็นสิ่งต่อไปนี้โดยเลือกและกดctrl-alt-t:

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

5

ใน OSX โดยใช้reveal.jsฉันได้รับปัญหาการแสดงผลถ้าฉันเพิ่งเป็นผู้ใช้treeแล้วก็คัดลอก / วางเอาท์พุต: สัญลักษณ์แปลก ๆ ปรากฏขึ้น

ฉันพบวิธีแก้ปัญหาที่เป็นไปได้ 2 ข้อ

1) ใช้ charset ascii และคัดลอก / วางผลลัพธ์ในไฟล์ markdown

tree -L 1 --charset=ascii

2) ใช้ HTML โดยตรงและ unicode ในไฟล์ markdown

<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 สำหรับสิ่งนี้:

สามทุ่ม

จะช่วยให้คุณมีการแสดงต้นไม้ไดเรกทอรีเป็นสตริงหรือวัตถุ ใช้กับบรรทัดคำสั่งจะช่วยให้คุณบันทึกการเป็นตัวแทนในไฟล์ txt

ตัวอย่าง:

$ npm dree parse myDirectory --dest ./generated --name tree
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.