• February 28, 2024
• 3 min read

Easy way to add Cover Image in Material for MkDocs Blogs

Image created by OpenAI's DALL·E

Incorporating a figure with a caption in markdown can be cumbersome, especially if you're aiming for specific styling. Directly adding an image with a caption through raw HTML requires extensive boilerplate for each image, which isn't ideal for every cover image in your content.

Here's how I used Attribute Lists (1) markdown extension to streamline the process.

1. Attribute Lists extension allows you to add HTML attributes and CSS classes to markdown elements. You can enable it in your mkdocs.yml file by adding the following configuration:

   markdown_extensions:
     - attr_list