Add Markdown Callouts to Hugo

The goal is to have obsidian style callouts like this:

The above image along with far more callout styles can be viewed here.

Research

To get me started the hugo docs have a section on alerts, which is exactly what I am looking for. With the nice added benefit of being really easy to style myself.

Showcase

Testing callouts:

📝 Note

This is my first callout.

📝 With custom title

Custom title callout.

📋 Todo

Important callout.

⚠️ Warning

Warning callout.

❓ Question

Question callout.

⚠️ Attention

Question callout.

❗ Caution

Caution callout.

⚡ Danger

Danger callout.

🪲 Bug

Bug callout.

❌ Failure

Failure callout.

💡 Tip

Tip callout.

💡 Hint

Hint callout.

✅ Done

Done callout.

✅ Success

Success callout.

📖 Example

Example callout.

❗ Important

Important callout.

Historical Data

Now, becuase I could update the styling of these callouts in the future, here are some screenshots of the originals: