Note: You need to run Hugo ⩾ 0.81.

Enable Markdown Attributes

In config.toml

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

or in config.yml

markup:
  goldmark:
    parser:
      attribute:
        block: true
        title: true

Usage

Add a single class:

![Image description](/images/portfolio/theme-screenshot.jpg)
{.custom-css-class}

Add multiples classes:

![Image description](/images/portfolio/theme-screenshot.jpg)
{.myclass class="custom-css-class1 custom-class2"}

Example

Custom CSS is applied to the picture

This picture surrounded by a frame is the result of this image together with some CSS and the following markup:

![image description](/illustrations/cloud.jpg)
{.frame-browser}

Références