2025-03-24 00:11:35 +01:00

2.5 KiB

+++ categories = ['howto', 'reference'] description = 'Display a list as a tree' title = 'Tree' +++

The tree shortcode displays a list as a tree with configurable icons and colors.

- home::folder
  - .config::folder
  - My Documents::folder::magic
    - home.php::fa-fw fab fa-php::#888cc4

Usage

{{< tabs groupid="shortcode-parameter">}} {{% tab title="codefence" %}}

```tree
- home::folder
  - .config::folder
  - My Documents::folder::magic
    - home.php::fa-fw fab fa-php::#888cc4
```

{{% /tab %}} {{% tab title="shortcode" %}}

{{%/* tree */%}}
- home::folder
  - .config::folder
  - My Documents::folder::magic
    - home.php::fa-fw fab fa-php::#888cc4
{{%/* /tree */%}}

{{% /tab %}} {{% tab title="partial" %}}

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

{{% /tab %}} {{< /tabs >}}

Codefence syntax is widely available in other Markdown parsers like GitHub and therefore is the recommend syntax for generating portable Markdown.

Parameter

Name Default Notes
<content> <empty> Your list as Markdown.

Item Syntax

<TEXT> [ :: <ICON> [ :: <COLOR> ] ]

Text can be followed by optional double colons (::) to define an icon and another optional double colons to define the icon's color.

  • ICON: Font Awesome icon name set to the left of the text. If you give a single string, it is selected from Font Awesome's solid icons. If you want to use a different set, you have to give the complete styles after the double colons. See above example for the home.php.

  • COLOR: The CSS color value to be used. If not set, the primary color will be used.

    You can also set a style value known from other shortcodes.

    • by severity: caution, 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
    • you can also define your own styles.

    If a style and a named HTML color have the same name, the HTML color will be used.