File Tree

Visual directory structure with automatic file type icons

File Tree

File trees display directory structures with automatic file type icons and support for highlighting, comments, and symlinks.

Basic Usage

  • my-project
    • src
      • index.js
      • utils.js
  • public
    • index.html
    • style.css
  • package.json
  • README.md

    • Syntax:

    :::file-tree
- project/
    - folder/
        - file.ext
    - another-file.ext
:::
    Markdown

    Use 4-space indentation for nesting.

    Highlighted Files

    Wrap filenames in **bold** to highlight important files:

    • coderoo
      • content
        • courses
          • **index.md**
          • 01-intro.md
          • 02-basics.md
  • **config.yaml**
  • public
    • index.php

    • With Comments

    Add descriptive text after filenames:

    • app
      • Controllers/ Request handlers
      • Services/ Business logic
      • Markdown/ CommonMark extensions
      • templates/ Twig templates
  • content/ Markdown content
  • user/ Instance-specific data
    • database/ SQLite database
  • storage/ Cache and search index

    • Placeholders

    Use ... to indicate truncated content:

    • vendor
      • phiki
        • resources
          • themes
            • dracula.json
            • github-dark.json
            • ...
        • grammars
          • php.json
          • javascript.json
          • ...

    Automatic Icons

    File icons are assigned automatically based on extension:

    • example
      • app.js
      • app.ts
      • style.css
      • index.html
      • server.php
      • script.py
      • config.json
      • settings.yaml
      • README.md
      • .env
      • logo.svg

    Best Practices

    • Use trailing / on directory names for clarity
    • Highlight files that are the focus of your explanation
    • Add comments to explain the purpose of directories
    • Use ... instead of listing every file in large directories