Use markdown attributes to split content into columns

Yet another application for markdown attributes…

markdown

A list of items:

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
{.c .c3}

There was nothing notable in the event which thus set the bells and the bourgeois of Paris in a ferment from early morning. It was neither an assault by the Picards nor the Burgundians, nor a hunt led along in procession, nor a revolt of scholars in the town of Laas, nor an entry of “our much dread lord, monsieur the king,” nor even a pretty hanging of male and female thieves by the courts of Paris.
{.c .c2}

rendered

css

.c {
  column-gap: 2em;
}
ul.c,
ol.c {
  column-gap: 3em;
  width: fit-content;
}
.c2 {
  column-count: 2;
}
.c3 {
  column-count: 3;
}
.c4 {
  column-count: 4;
}
17 Likes

That is pretty cool, thanks. I will steal this one.

It is not standard markdown right? How does this work? Is it Hugo magic?

See https://gohugo.io/content-management/markdown-attributes. More info here.

2 Likes

Thanks for sharing that! I have been dealing with that issue for a long time.