Shortcodes

pCP Team 26 May 2022 pCP 6.1.0 Publishing
Shortcodes are used to add a little more functionality to Markdown. Shortcodes are located in the layouts sub-directory.

Shortcodes available

Shortcode Description
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
lead.html Used for a lead in paragraph
table.html Used to format tables

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

Be sure to read me, I might have important information for you.

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
        ├───archetypes
        ├───assets
        ├───content
        ├───layouts
        │   ├───_default
        │   ├───downloads
        │   ├───partials
        │   ├───releases
        │   ├───shortcodes     <---- in here
        │   └───taxonomy
        ├───resources
        └───static

Further reading

The Software and Information is provided "as is" without warranty of any kind, either express or implied, including without limitation any implied warranties of condition, uninterrupted use, merchantability, fitness for a particular purpose, or non-infringement.
Raspberry Pi is a trademark of the Raspberry Pi Foundation.