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.
Danger
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 #
Shortcode | Description |
---|---|
alert.html | Not used |
button.html | Not used |
card.html | Used for warning and danger message |
childpages.html | Used to generate links to child pages |
code.html | Used to display code with a copy button |
collapse.html | Not used |
columns.html | Not used |
details.html | Not used |
doublecode.html | Not used |
lead.html | Used for a lead in paragraph |
tab.html | Not used |
table.html | Not used |
tabs.html | Not used |