Add custom CSS classes to images with Hugo's Markdown attributes


Note: You need to run Hugo ⩾ 0.81.

1. 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

2. Add custom CSS#

See the theme’s documentation

3. 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"}

Références#


Tags:

Related articles:


Comments: