Admonition Shortcodes Demo

January 18, 2026 3 min read 477 words

A demonstration of the note, warning, tip, and info admonition shortcodes available for content authors.

Table of Contents

This post demonstrates the admonition shortcodes available for highlighting important information in your articles. Each admonition type has a distinct color scheme and icon to help readers quickly identify the type of information being presented.

Note

Use notes to highlight general information that readers should be aware of.

Note

This is a basic note. Notes are useful for providing additional context or information that supplements the main content.

You can also customize the title:

Remember

Custom titles help you create more specific callouts. This note has a custom title instead of the default “Note”.

Notes support markdown formatting, including:

Lists
inline code
Links

Markdown Support

You can use bold, italic, and code within admonitions.

Here’s a list inside a note:

First item
Second item
Third item

Warning

Warnings draw attention to potential issues, gotchas, or things that could cause problems.

Warning

Be careful when running commands with sudo privileges. Always review commands before executing them.

Breaking Change

In version 2.0, the API endpoint has changed from /api/v1/users to /api/v2/users. Update your integrations accordingly.

Security Notice

Never commit sensitive information like API keys, passwords, or tokens to version control. Use environment variables or secret management tools instead.

Tip

Tips provide helpful suggestions, best practices, or productivity improvements.

Tip

Use keyboard shortcuts to speed up your workflow. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the command palette in VS Code.

Pro Tip

You can chain multiple git commands together using && to save time:

git add . && git commit -m "message" && git push

Performance Optimization

Enable lazy loading for images below the fold to improve initial page load times. Add loading="lazy" to your <img> tags.

Info

Info boxes provide supplementary information, background context, or interesting facts.

Info

Hugo is one of the fastest static site generators available, capable of building thousands of pages in seconds.

Background

The term “admonition” comes from the Latin word “admonitio” meaning “a reminder” or “warning.” These callout boxes are commonly used in technical documentation to highlight important information.

Did You Know?

This blog is built with Hugo and uses Tailwind CSS for styling. The entire site is statically generated and deployed to Cloudflare Pages for fast, global delivery.

Combining Admonitions

You can use multiple admonition types in sequence to create comprehensive documentation:

Note

Before proceeding, make sure you have Node.js 18 or later installed.

Tip

Use nvm (Node Version Manager) to easily switch between Node.js versions.

Warning

Running npm install with an older Node.js version may result in dependency resolution errors.

Info

You can check your current Node.js version by running node --version in your terminal.

Summary

Shortcode	Use Case	Color
`note`	General information, context	Blue
`warning`	Potential issues, gotchas	Amber
`tip`	Best practices, suggestions	Green
`info`	Background, supplementary info	Purple

All admonitions support:

Custom titles via the title parameter
Full markdown formatting inside
Dark mode with appropriate color adjustments