Tree

Th' tree shortcode displays text as a tree wit' configur'ble ay'cons an' colors.

Usage

```tree
- home | folder
  - [.config](http://example.com) | folder
  - My Documents | folder | magic
    - home.php | fa-fw fab fa-php | #888cc4
```

{{% tree %}}
- home | folder
  - [.config](http://example.com) | folder
  - My Documents | folder | magic
    - home.php | fa-fw fab fa-php | #888cc4
{{% /tree %}}

{{ partial "shortcodes/tree.html" (dict
  "page" .
  "content" `- home | folder
  - [.config](http://example.com) | folder
  - My Documents | folder | magic
    - home.php | fa-fw fab fa-php | #888cc4`
)}}

Marrrkdown codefence rules be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n portable Marrrkdown.

Parameter

Item Rules

<NAME> [ | <ICON> [ | <COLOR> ] ]

Th' NAME can be followed by an optional pipe (|) t' define an ICON an' further optional pipe t' define th' icon’s COLOR.

• ICON: Font Awesome ay'con name set t' th' left o' th' NAME. If ye give a single str'n, it be selected from Font Awesome’s solid ay'cons. If ye want t' use a different set, ye have t' give th' complete styles after th' do'ble colons. See above example fer th' home.php.

• COLOR: Th' CSS color value t' be used. If not set, th' primary color will be used.

  Ye can also set a style value known from other shorrrtcodes.

  • by severity: caut'n, important, info, note, tip, warning
  • by brand color: primary, secondary, accent
  • by color: blue, cyan, green, grey, magenta, orange, red
  • by special color: default, transparent, code, link, act'n, inline
  • ye can also define yer own styles.

  If a style an' a named HTML color have th' same name, th' style color will be used.

Examples

tree Command Output

Use th' tree command o' yer favorite operat'n system an' dump it right into th' shortcode. Avast, that th' directory marker (here C:.) be removed if present.

```tree
C:.
│   featured.png
│   index.en.md
│   index.pir.md
│   MaybeTreasure.en.txt
│   MaybeTreasure.pir.txt
│   NoTreasure.en.txt
│   Treasure.pir.txt
│
└───subdir
        hugo.png
```

Marrrkdown List wit' Styled Items

Every poss'ble combinat'n

```tree
- just names
  - Document
  - My Document
  - [My linked Document](http://example.com)
- simple ay'cons | folder
  - Document | file
  - My Document | file
- mindblow'n ay'cons
  - index.md | fa-fw fab fa-markdown
  - index.html | fa-fw fab fa-html5
- an' now wit' color
  - script.php | fa-fw fab fa-php | purple
  - alt script.php | fa-fw fab fa-php | #888cc4
  - magic.php | fa-fw fab fa-php | magic
```