# Assign class or id attribute to Markdown code blocks

**URL:** <https://zola.discourse.group/t/assign-class-or-id-attribute-to-markdown-code-blocks/1602>\
**Category:** Support\
**Created:** [January 14, 2023, 7:06pm UTC](https://zola.discourse.group/t/assign-class-or-id-attribute-to-markdown-code-blocks/1602 "2023-01-14T19:06:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wigging](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/wigging/32/905_2.png) [@wigging](https://zola.discourse.group/u/wigging)\
**Post date:** [January 14, 2023, 7:06pm UTC](https://zola.discourse.group/t/assign-class-or-id-attribute-to-markdown-code-blocks/1602/1 "2023-01-14T19:06:12Z")

</div>

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:

````auto
```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.

````auto
```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](https://kramdown.gettalong.org/syntax.html#attribute-list-definitions) supports this feature but I’m not sure how this is implemented in Zola.

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [January 15, 2023, 9:19pm UTC](https://zola.discourse.group/t/assign-class-or-id-attribute-to-markdown-code-blocks/1602/2 "2023-01-15T21:19:34Z")

</div>

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](https://github.com/raphlinus/pulldown-cmark/issues/606)) but no comments.

---

<div class="post-metadata">

**Author:** ![kamov](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kamov/32/904_2.png) [@kamov](https://zola.discourse.group/u/kamov)\
**Post date:** [January 15, 2023, 11:06pm UTC](https://zola.discourse.group/t/assign-class-or-id-attribute-to-markdown-code-blocks/1602/3 "2023-01-15T23:06:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![baleboy](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/baleboy/32/969_2.png) [@baleboy](https://zola.discourse.group/u/baleboy)\
**Post date:** [April 3, 2023, 7:31am UTC](https://zola.discourse.group/t/assign-class-or-id-attribute-to-markdown-code-blocks/1602/4 "2023-04-03T07:31:34Z")

</div>

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.