Hugo-admonitions: A simple way to add beautiful Callouts to hugo site

tips & tricks
11

The github.com/KKKZOZ/hugo-admonitions module has evolved a bit since the original post.

Take it for a spin:

git clone --single-branch -b hugo-forum-topic-52576 https://github.com/jmooring/hugo-testing hugo-forum-topic-52576
cd hugo-forum-topic-52576
hugo server

Notes:

  • The Markdown syntax is compatible with GitHub, Obsidian, and Typora
  • The admonition types (e.g., “Warning”, “Note”) are easily localized[1]
  • Override styles by copying the source into assets/sass/vendors/_admonitions.scss

To add this module to your project, initialize your project as a Hugo module:

hugo mod init foo

In the above, foo is typically something like github.com/user/project.

Then add this to your site configuration:

[[module.imports]]
path = "github.com/KKKZOZ/hugo-admonitions"

To update as new versions are released:

hugo mod get -u github.com/KKKZOZ/hugo-admonitions

Many thanks to @KKKZOZ for putting this together. It’s a great example of using a block quote render hook.

  1. The project welcomes PRs to add new languages ↩︎

3 Likes