Use Hugo and Docsy Shortcodes

Hugo shortcodes

Shortcodes let you do things like insert fancy stuff like tabbed codeblocks. You can see them in the docs repo:

• Rendered w/ examples in content/en/docs/zz-contribute in the docs repo. Build this locally by running hugo server --buildDrafts
• layouts for the raw source

Refer to them by the filename without the .html and enclosed by {{< shortcode >}}. For example, {{< legacy >}}.

Hugo Shortcodes Guide

For how to use the gist shortcode, see Gist vs Codeblock and Display Single Gist That Contains Many Files.

Docsy theme shortcodes

Docsy Shortcodes

alert; swaggerui; imgproc; tabpane; cardpane and cards; readfile for including markdown and code files in a page

Armory docs custom shortcodes

location: docs/layouts/shortcodes

Heading

This shortcode works in conjunction with the i118n/en.toml file, which contains key/value pairs for common headings.

Usage:

#### {{% heading "prereq" %}}

Renders:

Before you begin

Another example:

#### {{% heading "installOperator" %}}

Install the Operator

Hyperlink with page title

You can use linkWithTitle to replace a markdown hyperlink.

[page name]({{ < ref "file name" >}})

See the [Best Practices]({{< ref "best-practices" >}}) guide for ....

If you want to use the page’s front matter title as the text of the hyperlink, you can use the linkWithTitle shortcode instead. It creates an HTML hyperlink using the page’s title and Permalink. Do not use this shortcode if you want to link to a specific section within a page.

See the {{< linkWithTitle best-practices.md >}} page...

Look at this page: {{< linkWithTitle "scale-agent/tasks/service-monitor.md" >}}.

Renders as:

See the Spinnaker Best Practices page…

See this page: Integrate Prometheus.

Google suite shortcode

In your Google sheet, choose “Publish to web” and then copy the URL.

Sheet

Slide deck

Icons

Search for icons at Font Awesome

1. Click **{{< icon "play" >}} Start Manual Execution**.

Renders to:

1. Click Start Manual Execution.

Line highlighting

In order to highlight specific lines in a code block, you must replace the Markdown code fence with Hugo’s highlight shortcode:

How to use the highlight shortcode: https://gohugo.io/content-management/syntax-highlighting/.