programing

Github README.md에서 디렉토리 트리를 나타내는 방법이 있습니까?

itsource 2021. 1. 17. 10:52
반응형

Github README.md에서 디렉토리 트리를 나타내는 방법이 있습니까?


내 Githubs repos 문서에서 다음과 같은 디렉토리 트리 구조를 나타내고 싶습니다.

여기에 이미지 설명 입력

ascii 아트로 만드는 것 외에도 Github 맛 마크 다운으로이를 수행 할 수있는 방법이 있습니까?

그래서 기본적 으로이 질문 과 같지만 github 특정 솔루션이 있는지 궁금합니다.


직접적으로는 아닙니다. 당신은 그것을 손으로 만들어서 직접 넣어야 할 것입니다. * nix 상자를 로컬에서 사용하고 utf를 사용하고 있다고 가정하면 tree 가 멋지게 생성 할 것입니다 (위에서 사용한 예제를 생성 한 것이라고 생각합니다).

readme.md문서 대상 으로을 의미한다고 가정하면 자동화 할 수있는 유일한 방법은 실행 tree하여 readme 파일에 포함 시키는 git pre-commit 후크 일 것입니다 . 출력이 변경된 경우에만 readme를 업데이트했는지 확인하기 위해 diff를 수행하고 싶을 것입니다.

Otoh github 페이지를 통해 별도의 문서를 유지하는 경우 할 수있는 작업은 로컬에서 jekyll (또는 다른 생성기)을 사용하고 정적 페이지를 직접 푸시하는 것으로 전환하는 것입니다. 그런 다음 플러그인 / 셸 스크립트 * / 수동 변경 (별로 다르지 않을 경우)으로 원하는 변경 사항을 구현하거나 위와 동일한 방법을 사용할 수 있습니다.

* 커밋 후크에 통합하면 페이지 변경에 추가 단계를 추가하지 않아도됩니다.


나는 이런 식으로 문제를 해결했습니다.

  1. treebash에 명령 삽입하십시오 .

    여기에 이미지 설명 입력

  2. github 저장소에 README.md를 만들고 bash의 페이지를 복사합니다.

  3. 마크 다운 코드 삽입

    여기에 이미지 설명 입력

  4. 출력을보고 행복하세요 =)

    여기에 이미지 설명 입력


트릭을 수행하는 작은 스크립트를 작성했습니다.

#!/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}"

예:

원래 트리 명령 :

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

3 directories, 7 files

마크 다운 트리 명령 :

$ ./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)

렌더링 된 결과 :

(링크는 Stackoverflow에 표시되지 않습니다 ...)

프로젝트 트리
  • 트리 -md
  • dir2
    • file21.ext
    • file22.ext
    • file23.ext
  • dir1
    • file11.ext
    • file12.ext
  • file_in_root.ext
  • README.md
  • dir3

이 작업을 자동화하기 위해 노드 모듈을 만들었습니다. 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'오류가 표시되면 운영 체제가 다른 줄 끝을 사용하고 mddir이 명시 적으로 줄 끝 스타일을 Unix로 설정하지 않으면이를 구문 분석 할 수 없다는 문제입니다. 이것은 일반적으로 Windows뿐만 아니라 일부 Linux 버전에도 영향을 미칩니다. 줄 끝을 Unix 스타일로 설정하는 작업은 mddir npm 전역 bin 폴더 내에서 수행해야합니다.

줄 끝 수정

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

npm config get prefix

해당 폴더에 CD

양조 설치 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

The best way to do this is to surround your tree in the triple backticks to denote a code block. For more info, see the markdown docs: http://daringfireball.net/projects/markdown/syntax#code


You can use <pre> tags as I did in one of my projects.


You can also check this tree-extended package. It can be used as a command line app by using node >= 6.x.

It is very similar to tree but also has the option of configuring the max deep in the tree, that is one of the awful things of it. Also you can filter by using .gitignore file.

여기에 이미지 설명 입력


Simple tree command will do the job. For example: tree -o readme.md will print the tree structure of your current working directory and write it to readme.md. Then open readme.md file in one of text editor like Sublime and wrap its content within a pair of triple backticks (```).

FYI: you might have to brew install tree in OSX if it's not already installed. In Linux and Windows it should just work fine. Also in windows you might have to replace hyphen with forward slash.

I hope this helps.


None of the above solution worked for me completely on my mac.

The best solution I found this is to use the utility created here.

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

Once you have installed the utility npm install md-file-tree -g then you can simply run to get all files tree

md-file-tree . > README.md

UTF-8로 생성하고 모든 파일과 폴더에 연결하여 쉽게 탐색 할 수 있습니다. 여기 에서 예를 보십시오 .

참조 URL : https://stackoverflow.com/questions/23989232/is-there-a-way-to-represent-a-directory-tree-in-a-github-readme-md

반응형