Description list shortcode

tips & tricks
1

I made a very small Hugo shortcode for easily creating description lists (which I blogged about here), as they’re not supported by Blackfriday Markdown see jgreely’s post below for an easier way to do this. You can find it in this gist – comes with the shortcode, suggested CSS and an example.

{{% description-list %}}
* Label: one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph.
* Other label: one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph.
* Another label: one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph. one or more sentences, maybe a short paragraph.
{{% /description-list %}}

which will look something like…

59_screenshot
2018.01.01_18.59_screenshot.png906×396 56.1 KB

2 Likes
2

config.toml:

[blackfriday]
extensions = [
    "DefinitionLists",
]

content file:

Term1
: definition1
Term2
: definition2

Should work fine with your CSS.

-j

7 Likes
3

Oh wow, thanks! Guess I missed that.

4

Just to add a minor detail, you need to have a newline between each term…

Term1
: definition1

Term2
: definition2

… and this extension is enabled by default in hugo.

1 Like