Skip to main content
    Search syntax tips

    Shortcodes

    Div

    Simple wrapper with a div tag, this shortcode can also take class in attributes like it would for an HTML element. Content written inside is rendered with Hugo.

    <!-- With markdown content -->
{{% div class="CSS classes" %}}

Markdown content:
- A bullet point ...

{{% /div %}}

<!-- Without markdown content -->
{{< div class="CSS classes" >}}

{{< non-markdown-content >}}

{{< /div >}}

    Image

    An alternative solution to native figure shortcode. Without caption attribute, only the img tag is created.

    When caption isn’t given, class attribute shouldn’t be given too since it will not be used.

    The HTML attribute alt cannot be provided and will have the image name as value (i.e. src="/images/my-image.jpg" then alt="my-image").

    {{< img
  class="CSS classes for the figure"
  src="image URL"
  img-class="CSS classes for the image"
  width="image width"
  height="image heihgt"
  caption="Caption"
>}}

    Example

    {{< img
  class="col-2"
  src="/logo/10.webp"
  height="100px"
  img-class="mb-1"
  caption="Arthur in The Beginning After the End"
  caption-class="text-italic text-center"
>}}
    10
    Arthur in The Beginning After the End

    Side image

    Simple wrapper (with div tag) to place an image on the side of a text / content.

    {{% side-img
  class="CSS classes for the wrapper"
  src="URL de l'image"
  img-class="CSS classes for the image"
  width="image width"
  height="image heihgt"
  inner-class="CSS classes for the content"
%}}

Markdown content:
- A bullet point ...

{{% /side-img %}}

    Example

    {{% side-img
  class="row-gap-3 col-gap-3 mt-3"
  src="/logo/10.webp"
  height="50px"
%}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /side-img %}}
    10

    Markdown content:

    • A bullet point …

    SVG

    A simple shortcode to display an SVG without going through the img tag. It can also be equipped with a tooltip if tooltip attribute is given. SVGs are fetched as raw HTML during Hugo build and can be remote (src starts with https://) or local.

    {{< svg src="/static/primer/book-16.svg" class="octicon" height="22" width="22" tooltip="A book" >}}

    Example

    Timeline item

    A timeline item uses associated Primer style (here). It is a simple item with a side badge and some content.

    {{% timeline-item
  badge="/primer/book-16.svg"
  class="CSS classes pour l'item complet"
  inner-class="CSS classes pour le contenu"
%}}

Markdown content:
- A bullet point ...

{{% /timeline-item %}}

    Example

    {{% timeline-item badge="/logo/10.webp" inner-class="fgColor-default" %}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /timeline-item %}}
{{% timeline-item badge="/logo/10.webp" inner-class="fgColor-default" %}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /timeline-item %}}
    10

    Markdown content:

    • A bullet point …
    10

    Markdown content:

    • A bullet point …

    Paginate

    A simple shortcode to display face to face two buttons (or only one) < Previous et Next > with custom URLs:

    {{< paginate next="/path/to/next" prev="/path/to/previous" format="default OU terse" >}}

    In terse mode, if next or previous isn’t provided, then the associated button is not displayed. In default mode, the associated button is shown but disabled.

    Example

    {{< paginate next="/en/walkthrough/shortcodes#paginate" prev="/en/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate next="/en/walkthrough/shortcodes#paginate" prev="/en/walkthrough/shortcodes#paginate" format="default" >}}


    {{< paginate prev="/en/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate next="/en/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate prev="/en/walkthrough/shortcodes#paginate" format="default" >}}
{{< paginate next="/en/walkthrough/shortcodes#paginate" format="default" >}}