Shortcodes

Shortcodes available

Card shortcode

Draw the reader’s attention by separating information from the rest of the page. Convey meaning to this information by using colors implying success, info, warning, or danger and an appropriate icon.

Usage

Simply place the following shortcode in the document.

{{< card style="STYLE" >}}
[content goes here]
{{< /card >}}

The STYLE parameter is directly applied to the card as a class in the format “border-{STYLE}”. Bootstrap has a variety of standard styles that can be used:

• primary
• success
• info
• warning
• danger

Example: style="danger".

Childpages shortcode

The childpages shortcode allows you to show a list of sub-pages of the current page. Placing the childpages shortcode in the How-to page will place a create a list of these sub-pages in that page.

Usage

Simply place the following shortcode in the document.

{{< childpages >}}

Code shortcode

Add code to your page with syntax highlighting and a copy button so your users can easily copy the code to their clipboard with the press of a button. The code may be entered inside the shortcode or come from an external file.

<div class="mydiv bg-primary shadow text-white">
	<h1 class="title">Hi there</h1>
	<p class="lead">I'm inside a code shortcode. Check out my syntax highlighting!.</p>
</div>

Usage

Simply place the following shortcode on the page

Code in the shortcode

{{< code lang="LANG" >}}
[your code]
{{< /code >}}

Code from a file

{{< code lang="LANG" file="code/mycode.html" >}}

Parameters

lang

The lang parameter defines the language to be used for code highlighting. You can find a complete list of supported languages here.

Example: lang=“html”

file

The file parameter allows you to define an external file that contains your code to be displayed. This is done by giving a path to that file, starting from the root directory of your site. For example, a HTML file named ‘mycode.html’ you wish to link that is in the docs/code/ directory can be defined as follows: file=“code/mycode.html”.

Lead shortcode

The lead shortcode creates a paragraph with the lead class to make it stand out. Great for introductions or summaries.

Usage

Simply place the following shortcode on the page

{{< lead >}}
[content]
{{< /lead >}}

More information

Theme directory tree

C:\
└───Hugo
    └───pCP-docs
        ├───archetypes
        ├───assets
        ├───content
        ├───layouts
        │   ├───_default
        │   ├───downloads
        │   ├───partials
        │   ├───releases
        │   ├───shortcodes     <---- in here
        │   └───taxonomy
        ├───resources
        └───static

Further reading

• Hugo shortcodes