Trees (Project Structure)¶

Display a directory tree / project structure in a clean "file explorer" card. Void gives tree code blocks a glassy, monospace treatment with subtly dimmed comments.

Basic usage¶

Wrap the tree in a tree fenced code block:

mkdocs-void/
├── void/                          # Python package
│   ├── __init__.py                  # Version (0.2.0)
│   ├── templates/
│   │   ├── base.html
│   │   ├── main.html
│   │   └── partials/
│   │       ├── header.html
│   │       └── toc.html
│   └── plugins/
│       └── void_plugin.py         # MkDocs plugin
├── docs/
│   ├── index.md
│   └── components/
├── mkdocs.yml
└── requirements.txt

```tree
mkdocs-void/
├── void/                          # Python package
│   ├── __init__.py                  # Version (0.2.0)
...
```

Features¶

• Box-drawing support — ├──, └──, │ glyphs render crisply in a monospace font.
• Dimmed comments — trailing # comments are shown in muted italic so they don't fight the tree lines.
• File-explorer card — each tree is wrapped in a subtle glass panel with rounded corners.
• Scrollable — long trees scroll horizontally instead of wrapping.

Aligning comments¶

Pipe characters and spaces keep columns aligned. Use a monospace source editor; Void renders 1:1 with white-space: pre.

src/
├── core/
│   ├── engine.py        # entry point
│   └── parser.py        # tokenizer
└── ui/
    ├── app.js           # main view
    └── styles.js        # tokens

Customizing¶

Override the card background/border by targeting the tree block in a custom stylesheet:

/* extra.css */
.highlight.language-tree {
  background: rgba(255, 255, 0, 0.04);
  border-color: var(--void-accent);
}

Trees pair well with the Code Highlighting and Admonitions components. See CSS Classes in Markdown to attach your own classes.