Callouts

· 4 min read
teaching

Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.

Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.

Usage

Basic Callout Types

Hugo Blox supports all 15+ callout types from Obsidian’s documentation:

Information & Notes:

> [!NOTE]  
> This is a note callout with important information that users should know.
Note

This is a note callout with important information that users should know.

> [!INFO]
> Alternative info callout - same styling as NOTE.
Info

Alternative info callout - same styling as NOTE.

> [!ABSTRACT]
> Use for abstracts, summaries, or TL;DR sections.
Abstract

Use for abstracts, summaries, or TL;DR sections.

Actions & Tasks:

> [!TODO]
> This is something that needs to be done.
Todo

This is something that needs to be done.

> [!TIP]
> Here's a helpful tip to make your workflow more efficient!
Tip

Here’s a helpful tip to make your workflow more efficient!

> [!SUCCESS]
> Great job! This operation completed successfully.
Success

Great job! This operation completed successfully.

Questions & Interactive:

> [!QUESTION]
> What do you think about this approach? Let us know!
Question

What do you think about this approach? Let us know!

> [!EXAMPLE]
> Here's a practical example of how to implement this feature.
Example

Here’s a practical example of how to implement this feature.

> [!QUOTE]
> "The best way to predict the future is to invent it." - Alan Kay
Quote

“The best way to predict the future is to invent it.” - Alan Kay

Warnings & Errors:

> [!WARNING]
> Be careful! This action might have unexpected consequences.
Warning

Be careful! This action might have unexpected consequences.

> [!CAUTION]
> Danger! This operation is irreversible and could cause data loss.
Caution

Danger! This operation is irreversible and could cause data loss.

> [!IMPORTANT]
> This is critical information that users must understand to proceed.
Important

This is critical information that users must understand to proceed.

> [!DANGER]
> This is extremely dangerous - proceed with extreme caution!
Danger

This is extremely dangerous - proceed with extreme caution!

> [!FAILURE]
> This operation failed. Check your configuration and try again.
Failure

This operation failed. Check your configuration and try again.

> [!BUG]
> Known issue: This feature doesn't work properly in Safari < 14.
Bug

Known issue: This feature doesn’t work properly in Safari < 14.

Custom Titles

You can customize the title of any callout:

> [!WARNING]+ Custom Warning Title
> This warning has a custom title instead of just "Warning".
Custom Warning Title

This warning has a custom title instead of just “Warning”.

Legacy Syntax (Deprecated)

The old shortcode syntax still works but shows a deprecation warning:

{{< callout note >}}
This still works but is deprecated. Use the Markdown syntax above!
{{< /callout >}}

CSS Customization

Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:

  • Base class: .callout
  • Type-specific data attribute: data-callout="note"
  • Component classes: .callout-icon, .callout-title, .callout-content, .callout-body

Custom CSS Example (add to your assets/css/custom.css):

/* Customize NOTE callouts */
.callout[data-callout="note"] {
  border-left-width: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Make SUCCESS callouts pulse */
.callout[data-callout="success"] {
  animation: pulse 2s infinite;
}

/* Custom icon styling */
.callout-icon svg {
  transition: transform 0.2s;
}

.callout:hover .callout-icon svg {
  transform: scale(1.1);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .callout[data-callout="warning"] {
    background-color: rgb(92 25 2);
    border-color: rgb(245 158 11);
  }
}

This approach matches Obsidian’s CSS customization system, ensuring your styles work across platforms.

Benefits of the New Syntax

  • Portable: Works with GitHub, Obsidian, and other Markdown editors
  • Standard: Uses widely-adopted Markdown callout syntax
  • Clean: No Hugo-specific shortcodes needed
  • Future-proof: Supported by the latest Hugo versions (0.132.0+)
  • Customizable: Semantic CSS classes and data attributes for easy styling
  • Complete: All 15+ Obsidian callout types supported
  • Multilingual: Callout titles are automatically translated based on your site’s language (and can be customized in the language packs)
Carol Hanna
Authors
Carol Hanna (she/her)

I am a PhD candidate in Computer Science at University College London, where my research explores how automation and AI can make software systems more resilient and adaptive. My work investigates automated repair and improvement through the lens of hot fixing and rapid recovery. Through projects combining search-based, reinforcement learning, and large language model–guided techniques, I study how intelligent systems can reason about, generate, and explain software changes. I have also examined the industrial and human aspects of rapid repair through studies of real-world hot fixing practices. I serve the software engineering community as a reviewer and organizer for top conferences and journals, as well as through teaching at UCL. Alongside my PhD, I work part-time as a Principal Research Scientist at a London-based startup, contributing to their tech stack and services. I am passionate about the startup ecosystem, with experience in venture capital and early-stage deep tech startups.

Research interests: Automated Software Engineering, Reinforcement Learning, Search-Based Software Engineering, Large Language Models, Automated Program Repair, Evolutionary Computation.