Assign class or id attribute to Markdown code blocks

Support
1

How do I assign a class or id to a code block in a markdown file? For example, I have the following code block in a markdown file:

```python
def sayhello():
    s = "hello there"
    return s
```

I tried to assign a class to that code block as shown below but it doesn’t work.

```python {.pre1000}
def sayhello():
    s = "hello there"
    return s
```

The Zola docs have examples of adding attributes to headers in markdown content but I don’t see how to add attributes to the code blocks. I know I can style all the code blocks from the CSS file, but I want to be able to have a style that only applies to certain code blocks. I can do this in Jekyll because Kramdown supports this feature but I’m not sure how this is implemented in Zola.

2

This is only implemented for the headers. There is an issue on the CommonMark repo to support more ([Feature Request] Allow custom HTML attributes to be inserted from within markdown content · Issue #606 · raphlinus/pulldown-cmark · GitHub) but no comments.

3

I feel like adding custom classes would be useful for images as well, but I’m not sure how feasible that would be to implement.

Trying to style the images by selecting them with just the img selector in CSS seems way to broad and ends up selecting too many images in markdown, even those that were added through short codes. It makes it more difficult to style different kinds of images.

4

I had the same problem, FWIW I solved it by creating a shortcode for images:

<img src={{path}} alt={{alt}} class="profile_pic" />

The class could also be a parameter.