Shortcodes

What are Shortcodes?

A shortcode is a small template you can embed in your posts to provide functionality markdown lacks. They are defined using Crinja templates in the shortcodes directory.

Example

Markdown doesn't have support for the <figure> tag, so you can use the figure shortcode to embed a figure:

{{% figure
    src="/nicolino.thumb.jpg"
    link="/nicolino.jpg"
    alt="Nicolino"
    caption="The real Nicolino"
%}}

The definition is just a template which can use the arguments you pass:

<figure>
    <a href="{{args.link}}"><img src="{{args.src}}"
        alt="{{args.caption}}"/></a>
<figcaption>{{args.caption}}</figcaption>
</figure>

Paired Shortcodes

Paired shortcodes have content between opening and closing tags. For example, there is raw which just passes whatever is inside as-is:

{{< raw >}}
This is called "inner"
{{< /raw >}}

{{inner}}

Inline Shortcodes

A shortcode can be inline so it doesn't require a separate template file. For example:

{{< foo.inline "this will be in title case" >}}{{ args.0 | title}}{{< /foo.inline >}}

This Will Be In Title Case

Verbatim and Markdown Shortcodes

Shortcodes can start with {{% and end with %}} or start with {{< and end with >}}

The difference is that when the shortcode has "inner" content, those called with a % will be parsed as markdown before being passed to the template, while those called with a < will be passed to the template as-is (thus: verbatim).

Nested Shortcodes

Nicolino supports nesting shortcodes as long as the outer shortcode is not verbatim. For example, you can nest two tag shortcodes:

{{% tag div class="outer" %}}
{{< tag div class="inner" >}}
This is inside two divs
{{< /tag >}}
{{% /tag %}}


<div class="outer">


<div class="inner">

This is inside two divs

</div>

</div>

Included Shortcodes

Figure

Support for the <figure> tag. Example

{{% figure foo
    src="/nicolino.thumb.jpg"
    link="/nicolino.jpg"
    alt="Nicolino"
    caption="The real Nicolino"
%}}

Raw

Used when you want to show content that looks like shortcodes or to avoid processing markdown in a piece of text. Example:

{{< raw >}}
This is **passed** as-is
{{< /raw >}}



This is **passed** as-is

Tag

Used to wrap markdown with any required tag. Example

{{% tag div class="pico-background-orange-350" %}}
This has an **orange** background.
{{% /tag %}}