Markdown attributes

tips & tricks
1

The v0.108.0 release of Hugo allows you, with the appropriate configuration and render hook, to add markdown attributes to stand-alone images, and/or wrap an image within a figure element while generating syntactically correct HTML.

But I suspect that many are not aware of how powerful markdown attributes can be. Use markdown attributes with block quotes, headings, horizontal rules, lists (dl, ol, and ul), paragraphs, and tables.

For example…

Site configuration

[markup.goldmark.parser.attribute]
block = true # default is false

Markdown

> This is a note.
{.note}

> This is a warning.
{.warning}

> This is dangerous.
{.danger}

Result

image

The alternative is verbose

{{< admonition "note" >}}
This is a note.
{{< /admonition>}}

{{< admonition "warning" >}}
This is a warning.
{{< /admonition>}}

{{< admonition "danger" >}}
This is dangerous.
{{< /admonition>}}

And you don’t need to create a shortcode.

Sass used in the example above 
.danger,
.note,
.warning {
  background: #efefef;
  border-left-style: solid;
  border-left-width: 0.4rem;
  border-radius: 0.2rem;
  margin-left: 0;
  > p {
    padding: 0.5rem 1rem;
  }
}

.warning {
  border-left-color: #ffbb00;
}

.note {
  border-left-color: #0000ee;
}

.danger {
  border-left-color: #ee0000;
}


25 Likes
3

:partying_face:

soooooo happy!

2 Likes
4

A post was split to a new topic: How to wrap an image in a figure with v0.108.0 and later

5

Oh yes I just recently discovered this and used it to float images in my blog

It’s especially powerful when combined with a CSS framework such as bootstrap

Here’s how I used it

2 Likes
6

ho it’s very powerfull

thanks for all tricks

7

Sweet! So it is as simple as creating a CSS class and adding that to the block element. I have a use case for this then as I was thinking of going the shortcode route! :grin:

8

My favourite side effect of this, and especially for blockquotes, is that it also look good when rendered on GitHub etc.

1 Like
9

Seems I haven’t undrestood well what the new feature about but for a long time already use with Hugo constructions like

This paragraph must be smaller than others
{.small}

and

> _Sincerely yours.
> Please switch it to the right._
{.right}

with

[markup.goldmark.parser.attribute]
    block = true
    title = true

in config.toml

Anyway thanks for efforts.

10

11 posts were split to a new topic: Markdown attributes not working