Hugo Shortcodes Demo
This page demonstrates all available shortcodes and their usage.
Alert Shortcode
Alerts can be used to highlight important information:
Button Shortcode
Buttons with different styles:
Default ButtonPrimary ButtonAccent Button External LinkCard Shortcode
Cards can be used to display content in a structured way:
Basic Card
Chart Shortcode
Create interactive charts:
Details Shortcode
Expandable content sections:
Click to expand
This content is hidden by default and can be expanded by clicking.
You can include any markdown content here:
- Lists
- Bold text
- Italic text
- Links
Figure Shortcode
Image figures with captions:

Filetree Shortcode
Display file structure:
📂 project/ ├── 📂 src/ │ ├── 📝 index.js │ └── 📝 styles.css ├── 📂 public/ │ └── 📝 index.html └── 📝 package.json
Gallery Shortcode
Create image galleries:
Grid Shortcode
Create responsive grid layouts:
Card 1
Card 2
Card 3
Math Shortcode
Display mathematical equations:
Inline math:
Block math:
Notice Shortcode
Informational notices:
Pro Tip
Important
Note
Warning
Quote Shortcode
Stylized blockquotes:
Education is not the learning of facts, but the training of the mind to think.
Tabs Shortcode
Tabbed content sections:
<div class="example">
<h1>Hello World</h1>
<p>This is a sample HTML code.</p>
</div>
.example {
padding: 20px;
background: #f5f5f5;
border-radius: 4px;
}
.example h1 {
color: #333;
margin-bottom: 10px;
}
document.addEventListener('DOMContentLoaded', () => {
const example = document.querySelector('.example');
example.addEventListener('click', () => {
console.log('Example clicked!');
});
});
Timeline Shortcode
Create vertical timelines:
Major Event
Another Event
Past Event
Tooltip Shortcode
Add helpful tooltips to text:
This is a hover me This is additional information that appears when you hover over the textexample.
YouTube Shortcode
Embed responsive YouTube videos: