I've pulled together shortcodes for note, tip and warning and used those for a while now in my blog:
The base code comes from the gohugoio-theme (e.g. used in the docs) from where I updated to match the Hermit Theme.
To produce the above, the following code in a markdown/content file is used:
{{% note %}}
Here is a piece of information I would like to draw your **attention** to.
{{% /note %}}
{{% warning %}}
This is a warning, which should be reserved for *important* information like breaking changes.
{{% /warning %}}
{{% tip %}}
Here's a bit of advice to improve your productivity with Hugo.
{{% /tip %}}
I've also added three svg-icons from the fontawesome, among others, explained in a blog post here.
I tried to include it in the most flexible way: fontawesome icons are only included as svg, and only those three (not the full library). There're 3 new colors added to _predefined.scss:
Any admonition scss is stored in a separate file, admonition.scss.
Happy to discuss the colors or style, if anyone is interested in this feature. E.g.: I decided against round-corners, since I found that the theme has already so many round corners.
I've pulled together shortcodes for note, tip and warning and used those for a while now in my blog:
The base code comes from the gohugoio-theme (e.g. used in the docs) from where I updated to match the Hermit Theme.
To produce the above, the following code in a markdown/content file is used:
I've also added three svg-icons from the fontawesome, among others, explained in a blog post here.
I tried to include it in the most flexible way: fontawesome icons are only included as svg, and only those three (not the full library). There're 3 new colors added to
_predefined.scss
:Any admonition scss is stored in a separate file,
admonition.scss
.Happy to discuss the colors or style, if anyone is interested in this feature. E.g.: I decided against round-corners, since I found that the theme has already so many round corners.