Tree

Th' tree shortcode displays a list 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`
)}}

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
  • 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

Bigger example

Every poss'ble combinat'n

```tree
- [just name](http://example.com) | folder
  - Documents
  - My Documents
- simple ay'cons | folder
  - Documents | folder
  - My Documents | folder
- not so simple ay'cons | file-alt | secondary
  - a.png | file-alt
  - a wit' border.png | file-alt
- mindblow'n ay'cons | fa-fw fab fa-markdown | accent
  - text.md | fa-fw fab fa-markdown
  - alternative text.md | fa-fw fab fa-markdown
- an' now wit' color | fa-fw fab fa-php
  - script.php | fa-fw fab fa-markdown | purple
  - alt script.php | fa-fw fab fa-markdown | #888cc4
  - magic.php | fa-fw fab fa-markdown | magic
```