About

A markdown tree plugin for markdown-it parser to render collapsible (foldable) trees. The tree is rendered as an unordered-list HTML element.

Installation

npm install markdown-it-ultree

Usage

// If you don't have markdown-it, install it
const markdownIt = require('markdown-it');
const ultree = require('markdown-it-ultree');
const mdit = markdownIt();
mdit.use(ultree);

/* You can use spaces or tabs (but not both simultaneously)
* to indent items
*/  
mdit.render(`\`\`\`ultree
output: foldable

.
    LICENSE
    package.json
    package-lock.json
    README.md
    src
        markdown-it-ultree.js
    test
        markdown-it-ultree.test.js

\`\`\``);

// or you can paste the output of the "tree" command as well
mdit.render(`\`\`\`ultree
output: foldable

.
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── markdown-it-ultree.js
└── test
    └── markdown-it-ultree.test.js

\`\`\``);

Output

Raw output (prettified)

<div class="ultree">
    <ul>
        <li><details open><summary>.</summary>
                <ul>
                    <li>LICENSE</li>
                    <li>package.json</li>
                    <li>package-lock.json</li>
                    <li>README.md</li>
                    <li><details open><summary>src</summary>
                            <ul>
                                <li>markdown-it-ultree.js</li>
                            </ul>
                        </details>
                    </li>
                    <li><details open><summary>test</summary>
                            <ul>
                                <li>markdown-it-ultree.test.js</li>
                            </ul>
                        </details>
                    </li>
                </ul>
            </details>
        </li>
    </ul>
</div>

HTML output with styling

NOTE: The CSS for the above image can be found in style folder.

Options

Options can be specified as key: value pairs at the beginning of the body of ultree block as shown in the example above.

Here are the currently supported options,

Option	Possible values	Description
output	foldable	(default) Output a foldable tree
	simple	Output a non-foldable tree
open	true	(default) Keep foldable tree expanded at the start
	false	Keep foldable tree collapsed at the start

Important

• The tree can have only one root.
• Do not mix tabs and spaces for indentation within one ultree block. Either use spaces (recommended) or tabs.
• Keep the indentation consistent. e.g. if you indent by 4 spaces, do not indent by 2 spaces later on within the same ultree block.

Related

A Visual Studio Code extension utilizing this plugin can be downloaded from Visual Studio Code marketplace and the repo can be found at VSCode Markdown Tree.