マークダウン構文でのディレクトリとファイル構造の表現


215

私のJekyllブログ投稿のいくつかでディレクトリとファイルの構造を説明したいのですが、Markdownはそのようなものを出力するためのきちんとした方法を提供していますか?

たとえば、Jekyll Webサイトのこのリンクで、ディレクトリとファイル構造がページに非常にきれいに出力されていることがわかります。

.
├── _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
具体的にはジェキルについて言及したので、この無毛のとそのソースは法案に合うかもしれません
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テンプレートとユーザーのWebブラウザーにあります。
RobertKenny 2013年

1
この選択のもう1つの利点は、(の出力のようにtree)外観上の理由でのみ異なるシンボルを使用する他の選択と比較して、差分が小さいことです。
villasv

1
このアンサーを使用すると、ツリーは数行のテキストとしてレンダリングされます。mdCodeプラグインを使用してVSCodeおよびVisualStudioでテストされています。また、GitHubではこれは機能していません
Danny

239

別のリポジトリの例に従って、ディレクトリ構造を1組の3つのバッククォート(```)で囲みました。

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

5
スタックオーバーフローは、新しいトリプルバックティック構文をサポートしていません。それらを単一のバックティックとして解釈します。単一のバッククォートは、コードをインラインテキストとしてマークします。これが、例の各行の間に白い縞がある理由です。互換性のある方法で複数行のコードをマークアップするには、テキストを4つのスペースでインデントします。
Rory O'Kane

3
SOはトリプルバックティックをサポートしていませんが、他のほとんどのMD実装(Github / BitBucketなど)はサポートしています。これが、各エントリが何であるかについてインラインコメントを持つツリーを機能させる唯一の方法でした。だから..ここから+1!
スコットバイヤーズ2017

1
この答えに賛成です。トリプルバックティックマークダウンは、Wordpressでも機能します。
Binita Bharati

Triple-backtickのサポートは現在SOで機能しているようです。
StriplingWarrior

41

treeを使用して、例に非常に似たものを生成できます。出力を取得したら、それを<pre>タグでラップして、プレーンテキストのフォーマットを保持できます。


よろしくお願いします。ありがとうございます。しかし、理論的なファイル構造についてはどうでしょうか?現時点でこれが唯一の解決策である場合は、必要な文字をコピーして貼り付けるだけでよい場合があると思います。再び乾杯。
Matt Rowles 2013年

私はこのソリューションが好きです。Markdownで見栄えをよくする
Anh Tuan


22

このタスクを自動化するノードモジュールを作成しました: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

醸造インストール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

1
悲しいことに、私はこれを試してみましたが、私のWindows 10マシンでは動作しません。プロジェクトは中止されたようです。
リッチホプキンス

1
こんにちは、ライブラリを試していただきありがとうございます。他のプロジェクトで忙しく、複製できませんが、可能な修正を見つけました。「npm config get prefix」を使用して、npm binフォルダーパスを取得します。そのフォルダーにCdし、「brew install dos2unix」を実行し、「dos2unix lib / node_modules / mddir / src / mddir.js」を実行します。これにより、行末がDosではなくUnixに変換されます。次に、通常どおりnode mddir "../relative/path/"を実行します。
ジョン・バーン2017年

私のWindows 10マシンで作業しましたが、ちょっとしたユーティリティです-ありがとう!
John Kattenhorn

19

すでに推奨されているように、を使用できますtree。しかし、再構成されたテキストと一緒に使用するには、いくつかの追加パラメーターが必要でした。

PDFの生成にtree使用pandocしている場合、標準出力は印刷されません。

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-treeパッケージで実現できます。

次のツリーを書くことができます:

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

それを選択してを押すと、次のように変換されますctrl-alt-t

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

5

OSXの下で、を使用するとreveal.js、ユーザーだけの場合、レンダリングの問題が発生しますtree出力をコピーして貼り付けると、が発生します。奇妙な記号が表示されます。

2つの解決策が見つかりました。

1)charset 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

私はわさびを使用することをお勧めします、それからあなたはこのような値下げのような感じを使うことができます

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

このためのNPMモジュールがあります。

npm dree

ディレクトリツリーを文字列またはオブジェクトとして表すことができます。コマンドラインで使用すると、表現をtxtファイルに保存できます。

例:

$ npm dree parse myDirectory --dest ./generated --name tree
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.