Shortcodes
In addition to the formatting support provided by Markdown, Hugo adds support for shortcodes, which are Go templates for easily including or displaying content (images, notes, tips, advanced display blocks, etc.).
For reference, the following shortcodes are available:
Highlighted paragraphs
This is achieved using Docsy shortcodes.
Placeholders
The following code:
{{% pageinfo %}} This is a placeholder. {{% /pageinfo %}}
Will render as:
Information messages
The following code:
{{% alert title="Note" color="info" %}} This is a Note. {{% /alert %}}
Will render as:
Note
This is a Note.Warning messages
The following code:
{{% alert title="Important" color="warning" %}} This is a warning.
{{% /alert %}}
Will render as:
Important
This is a warning.Code or shell snippets
The code or instructions should be surrounded with three backticks, followed by an optional highlighting type parameter.
The supported languages are dependent on the syntax highlighter, which depends itself on the Markdown parser.
The following Markdown creates a shell excerpt:
```shell
$ ssh-keygen -f fedcloud
$ echo $HOME
```
Will render as:
$ ssh-keygen -f fedcloud
$ echo $HOME
Tip
If you click the Copy button in the top-right corner of a shell example, all commands in that block are copied to the clipboard. The prompt in front of each command, and any command output is not copied.Note
In case the command(s) in your shell example cause the introduction of a horizontal scroll bar, consider breaking the command(s) into multiple lines with trailing backslashes (\). However, you should never break command output to multiple lines, as that makes understanding the output, and recognizing it in real life, very difficult.Code in multiple languages
This is also achieved using Docsy shortcodes.
When you need to include code snippets, and you want to provide the same code in multiple programming languages, you can use a tabbed pane for code snippets:
{{< tabpane >}}
{{< tab header="C++" lang="C++" >}}
#include <iostream>
int main()
{
std::cout << "Hello World!" << std::endl;
}
{{< /tab >}}
{{< tab header="Java" lang="Java" >}}
class HelloWorld {
static public void main( String args[] ) {
System.out.println( "Hello World!" );
}
}
{{< /tab >}}
{{< tab header="Kotlin" lang="Kotlin" >}}
fun main(args : Array<String>) {
println("Hello, world!")
}
{{< /tab >}}
{{< tab header="Go" lang="Go" >}}
import "fmt"
func main() {
fmt.Printf("Hello World!\n")
}
{{< /tab >}}
{{< /tabpane >}}
Will render as:
#include <iostream>
int main()
{
std::cout << "Hello World!" << std::endl;
}class HelloWorld {
static public void main( String args[] ) {
System.out.println( "Hello World!" );
}
}fun main(args : Array<String>) {
println("Hello, world!")
}import "fmt"
func main() {
fmt.Printf("Hello World!\n")
}Content with multiple variants
When you need to include multiple variants of the same content, other than code snippets in multiple programming languages, you can use the following shortcode:
{{< tabpanex >}}
{{< tabx header="Linux" >}}
You can list all files in a folder using the command:
```shell
$ ls -a -l
```
{{< /tabx >}}
{{< tabx header="Mac" >}}
To get a list of all files in a folder, press **Cmd** + **Space** to open
a spotlight search, type terminal, then press Enter. In the terminal window
then run the command:
```shell
$ ls -a -l
```
{{< /tabx >}}
{{< tabx header="Windows" >}}
You can list all files in the current folder using the command:
```shell
> dir
```
or you can use PowerShell:
```powershell
> Get-ChildItem -Path .\
```
{{< /tabx >}}
{{< /tabpanex >}}
Will render as:
You can list all files in a folder using the command:
$ ls -a -l
To get a list of all files in a folder, press Cmd + Space to open a spotlight search, type terminal, then press Enter. In the terminal window then run the command:
$ ls -a -l
You can list all files in the current folder using the command:
> dir
or you can use PowerShell:
> Get-ChildItem -Path .\