Preprocessor / additions to markdown's syntax

support
1

Hello,

I’m trying to create some documentation with hugo for a software, it is very nice and I love it. I just wonder what would be the best way to add some preprocessing on the input to generate different HTML code based on a custom syntax.
For example, if I have the following lines:

note: this is a notice
warning: this is a warning

I would like to generate some HTML code in blocks like this:

<div class="alert alert-info" role="alert">this is a notice</div>
<div class="alert alert-warning" role="alert">this is a warning</div>

Is there such a preprocessing in a hugo? Should I do my preprocess before hugo? What are you thoughts on this?

2

Hello markand,
Afaik - Hugo can’t do that.

I use brunch with postcss for preprocessing.
Hugo with brunch

3

I’ve saw the material-docs theme which use the hugo shortcodes mechanism to implement new kind of additions.

For example with their theme you can do:

{{< note title="Note" >}}
Nothing to see here, move along.
{{< /note >}}

This is interesting, I’ll check it out :slightly_smiling:

4

The Learn theme also includes admonitions. Details and demo are at https://matcornic.github.io/hugo-learn-doc/cont/shortcodes/

It would be useful if https://themes.gohugo.io/ had a tag called admonitions so we could easily find all the themes that have built-in admonitions.

5

@markand to give you an idea of how shortcodes might help with your use case:

Create the following at layouts/shortcodes/alert.html:

<div class="alert alert-{{.Get 0}}" role="alert">{{.Get 1}}</div>

Then in your markdown files you can call this shortcode anywhere you want within the content/body copy for the file:

{{< alert "info" "This is a notice." >}}

This should then render as follows:

<div class="alert alert-info">This is a notice.</div>

If you want the added ability to write the copy for the alert in markdown, you can use the alternate shortcode syntax at layouts/shortcodes/alert.html

<div class="alert alert-{{.Get 0}}" role="alert">{{- .Inner -}}</div>

But you would then have to call the shortcode using the %:

{{% alert "info" %}}
This is a **notice**.
{{% /alert %}}

Which would render as…

<div class="alert alert-info" role="alert">This is a <strong>notice</strong>.</div>
4 Likes
6

I forgot Bootstrap already has styling for alerts. Thanks for this!

1 Like