In addition to all the default Hugo shortcodes , Compost adds a few extras for additional functionality.

Alert #

alert outputs its contents as a stylised message box within your article. It’s useful for drawing attention to important information that you don’t want the reader to miss.

The input is written in Markdown so you can format it however you please.

Example:

{{< alert >}}
**Warning!** This action is destructive!
{{< /alert >}}

Badge #

badge outputs a styled badge component which is useful for displaying metadata.

Example:

{{< badge >}}
New article!
{{< /badge >}}

Button #

button outputs a styled button component which can be used to highlight a primary action. It has two optional variables href and target which can be used to specify the URL and target of the link.

Example:

{{< button href="#button" target="_self" >}}
Call to action
{{< /button >}}

Icon #

icon outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.

Example:

{{< icon "github" >}}

Output:

Icons are populated using Hugo pipelines which makes them very flexible. Congo ships with a default set of icons for social, email, and generic links. If you want to add your own icons, you can simply place them in /assets/icons/ and reference them using the icon shortcode passing in the icon’s filename (without the .svg. extension).

Icons can also be used in partials by calling the icon partial .

Lead #

lead is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the lead shortcode.

Example:

{{< lead >}}
When life gives you lemons, make lemonade.
{{< /lead >}}

When life gives you lemons, make lemonade.

Mermaid #

mermaid allows you to draw detailed diagrams and visualisations using text. It uses MermaidJS under the hood and supports a wide variety of diagrams, charts and other output formats.

Simply write your Mermaid syntax within the mermaid shortcode and let the plugin do the rest.

Refer to the official Mermaid docs for details on syntax and supported diagram types.

Example:

{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}

Tabs #

Tabs let you organize content by context, for example installation instructions for each supported platform.

{{< tabs "uniqueid" >}}
{{< tab "MacOS" >}} # MacOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}

Example #

echo "for test"

Figure #

Same with Hugo’s built-in shortcode, but add image resize and lazy loading.

{{< figure src="compost.jpg" alt="Compost Photo" caption="Photo by [Daniel Öberg](https://unsplash.com/)" >}}