Shortcodes

Shortcodes are used to add a little more functionality to Markdown. Shortcodes are located in the theme layouts directory.

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.

I’m a lead paragraph. That means I’m more important. And you can see that.

Usage #

Simply place the following shortcode on the page

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

More information #

Theme directory tree #

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

Shortcodes available #

Further reading #

• Hugo shortcodes