New markdown attribute and render hooks

support
9

Markdown attributes may be used with most block-level elements, but not with inline elements. Images and anchors (links) are inline elements.

attribute

Enable custom attribute support for titles and blocks (emphasis mine) by adding attribute lists inside single curly brackets…

With Hugo in its default configuration, these are the block-level HTML elements that may be represented with markdown. Note that markdown attributes cannot be used with dd, dt, or li elements.

Element Description Accepts markdown attributes[1]
blockquote Block quotation :white_check_mark:
dd Describes a term in a description list :x:
dl Description list :white_check_mark:
dt Description list term :x:
h1 - h6 Heading :white_check_mark:
hr Horizontal rule :white_check_mark:
li List item :x:
ol Ordered list :white_check_mark:
p Paragraph :white_check_mark:
pre Preformatted text[2] :white_check_mark:
table Table :white_check_mark:
ul Unordered list :white_check_mark:
Examples 
> Able was I ere I saw Elba.
{.foo}

Able
: Having the power, skill, means, or opportunity to do something.
Elba
: A Mediterranean island in Tuscany, Italy.
{.foo}

## Heading Level 2 {.foo}

---
{.foo}

1. Ordered list item 1
1. Ordered list item 2
{.foo}

This is a paragraph.
{.foo}

```text {.foo}
A fenced code block
```

Name|Type
:--|:--
Felix|Cat
Spot|Dog
{.foo}

- Unordered list item 1
- Unordered list item 2
{.foo}

Also note that using an image render hook to produce a figure element will result in invalid HTML. You cannot place a figure element within a p element. See this discussion.

  1. Assumes that markup.goldmark.parser.attribute.title and markup.goldmark.parser.attribute.block are both true in your site configuration. ↩︎

  2. Fenced code block ↩︎

6 Likes