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

위의 라인 블록 문자는 유니 코드 ( 이 답변에 설명되어 있음 )라고 생각하지만 Markdown 또는 다른 브라우저에서 처리하는 방법을 잘 모르겠습니다. Markdown에 위의 유니 코드 문자로 출력되는 방법이 포함되기를 바랐습니다.

유니 코드 문자에 관심이있는 경우 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.

다른 저장소 의 예를 따라 디렉토리 구조를 한 쌍의 삼중 백틱 ( ```)으로 묶었습니다 .

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

트리 를 사용 하여 예제와 매우 유사한 것을 생성 할 수 있습니다 . 출력이 있으면 <pre>일반 텍스트 형식을 유지하기 위해 태그로 묶을 수 있습니다.

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

이 작업을 자동화하기 위해 노드 모듈을 만들었습니다. mddir

용법

노드 mddir "../relative/path/"

설치하려면 다음을 수행하십시오. npm install mddir -g

현재 디렉토리에 대한 마크 다운을 생성하려면 : mddir

절대 경로를 생성하려면 다음을 수행하십시오. mddir / absolute / path

상대 경로를 생성하려면 : mddir ~ / Documents / whatever.

md 파일은 작업 디렉토리에 생성됩니다.

현재 node_modules 및 .git 폴더는 무시합니다.

문제 해결

'node \ r : No such file or directory'오류가 표시되면 운영 체제에서 다른 줄 끝을 사용하고 줄 끝 스타일을 Unix로 명시 적으로 설정하지 않으면 mddir에서 구문을 분석 할 수 없다는 것입니다. 이것은 일반적으로 Windows뿐만 아니라 일부 Linux 버전에도 영향을 미칩니다. 줄 끝을 Unix 스타일로 설정하려면 mddir npm 전역 bin 폴더 내에서 수행해야합니다.

줄 끝 수정

다음을 사용하여 npm bin 폴더 경로를 가져옵니다.

npm config get prefix

해당 폴더에 CD

brew install dos2unix

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

이것은 줄 끝을 Dos 대신 Unix로 변환합니다.

그런 다음 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

이미 권장 한대로을 사용할 수 있습니다 tree. 그러나 텍스트를 재구성 된 텍스트와 함께 사용하려면 몇 가지 추가 매개 변수가 필요했습니다.

pdf 제작에 tree사용 pandoc하는 경우 표준 출력이 인쇄되지 않습니다 .

tree --dirsfirst --charset=ascii /path/to/directoryASCII다음과 같이 문서에 통합 할 수 있는 멋진 트리를 생성합니다 .

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

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

Atom 편집기를 사용하는 경우 ascii-tree 패키지로 이를 수행 할 수 있습니다 .

다음과 같은 트리를 작성할 수 있습니다.

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

그것을 선택하고 눌러 다음과 같이 변환하십시오 ctrl-alt-t:

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

OSX에서을 사용 reveal.js하면 사용자를 tree출력 한 다음 출력을 복사 / 붙여 넣기하면 렌더링 문제가 발생합니다 . 이상한 기호가 나타납니다.

가능한 두 가지 해결책을 찾았습니다.

1) charset ascii를 사용하고 단순히 마크 다운 파일에 출력을 복사 / 붙여 넣기

tree -L 1 --charset=ascii

2) 마크 다운 파일에서 HTML과 유니 코드를 직접 사용하십시오.

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

도움이 되길 바랍니다.

와사비 를 사용하는 것이 좋습니다. 그러면 마크 다운 느낌을 사용할 수 있습니다.

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 도서관에서 그 정확한 구문을 던져 이

동적으로 생성하려면 Frontend-md를 사용하는 것이 좋습니다 . 사용하기 간단합니다.

이를위한 NPM 모듈이 있습니다.

npm dree

디렉토리 트리를 문자열 또는 객체로 표현할 수 있습니다. 명령 행과 함께 사용하면 표현을 txt 파일로 저장할 수 있습니다.

예:

$ npm dree parse myDirectory --dest ./generated --name tree