Hugo Shortcodes

What is a shortcode?

Often the markdown is not enough to express good content, for example, adding a video to exemplify a subject or positioning a centralized image, being necessary to add html code for this. Given this limitation, the “Hugo” framework offers us a solution to avoid losing the unique experience using markdown, abstracting the need to use html and css. This solution is called shortcode.

Available shortcodes

Internal link references

The best way to make references to internal links in the documentation is to use a shortcode called “ref”, with which we can pass an absolute path to a given page.

• Syntax example

[Link Example]({{< ref path="/get-started/installing-beagle/backend.md" lang="en" >}})

• It will be rendered as:

Link Example

To learn more about ref, click here

Alerts

Alerts are used to highlight important information when following a configuration step, tutorial, or to highlight requirements necessary for some functionality.

• Syntax example

{{% alert color="info" %}}
  ## Alert example
  - info - color - dark-blue
{{% /alert %}}

{{% alert color="success" %}}
  ## Alert example (2)
  - sucess - color - green
{{% /alert %}}

{{% alert color="warning" %}}
  ## Alert example (2)
  - warning - color - orange
{{% /alert %}}

{{% alert color="danger" %}}
  ## Alert example (2)
  - danger - color - red
{{% /alert %}}

• It will be rendered as:

Images and Figures

Images can be inserted using the markdown syntax ! [ImageName] (imageUrl). However, using markdown may limit your image rendering settings, such as the image dimension (size x width).

To render images, gifs and other types of figures use the following shortcode:

• Sintax example:

{{< figure src="https://media.glassdoor.com/sqll/2482761/zup-innovation-squarelogo-1583862820688.png" width="250" height="250" >}}

• It will be rendered as:

To know all the parameters that the figure can receive, access here

Videos

You can embed youtube videos directly into the documentation. Ideal to complement that tutorial content or dissemination. To do this, use the video ID located in your url, eg:

in this link: https: //www.youtube.com/watch? v = ECNnZ6rP9qk the ID is after v =, that is: ECNnZ6rP9qk

• Sintax example:

{{< youtube ECNnZ6rP9qk >}}

• It will be rendered as:

Tabs

Tabs are useful for exemplifying source codes that can be made in different programming languages, or some mandatory configuration step on different platforms, such as, for example, android, iOS, backend or web.

• Syntax example:

{{< tabs id="MyUniqueTabID" >}}

{{% tab name="Tab1" %}}
{{% /tab %}}

{{% tab name="Tab2" %}}
{{% /tab %}}

{{% tab name="Tab3" %}}
{{% /tab %}}
{{< /tabs >}}

• It will be rendered as:

• Tab1
• Tab2
• Tab3

If you want to learn more about shortcodes, we recommend that you access Hugo official documentation and learn more about creating custom shortcodes.

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.