# Add labels to code blocks?

**URL:** <https://zola.discourse.group/t/add-labels-to-code-blocks/2273>\
**Category:** Support\
**Created:** [September 2, 2024, 11:17pm UTC](https://zola.discourse.group/t/add-labels-to-code-blocks/2273 "2024-09-02T23:17:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kaimast](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kaimast/32/1297_2.png) [@kaimast](https://zola.discourse.group/u/kaimast)\
**Post date:** [September 2, 2024, 11:17pm UTC](https://zola.discourse.group/t/add-labels-to-code-blocks/2273/1 "2024-09-02T23:17:05Z")

</div>

Is there a way to add a title/label to code blocks? Similarly, is there a way to reference a code block in text.

For example, I would like a piece of code to have a label that says “Listing 1: Example code” and then in the text I can refer to “Listing 1” when talking about it. Ideally, the numbering of code blocks would be automatically set by Zola, not manually by me.  
If you are familiar with LaTeX, this is a supported feature of the listings` package.

Thanks in advance for your help!

---

<div class="post-metadata">

**Author:** ![welpo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/welpo/32/1087_2.png) [@welpo](https://zola.discourse.group/u/welpo)\
**Post date:** [September 5, 2024, 12:22pm UTC](https://zola.discourse.group/t/add-labels-to-code-blocks/2273/2 "2024-09-05T12:22:55Z")

</div>

> [@kaimast](#):
>
> Is there a way to add a title/label to code blocks?

This unmerged (but approved) PR adds that feature: [Add path annotation for codeblock by izissise · Pull Request #2610 · getzola/zola · GitHub](https://github.com/getzola/zola/pull/2610)

> [@kaimast](#):
>
> Similarly, is there a way to reference a code block in text

I don’t think there’s a native way to achieve this.

---

<div class="post-metadata">

**Author:** ![kaimast](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kaimast/32/1297_2.png) [@kaimast](https://zola.discourse.group/u/kaimast)\
**Post date:** [September 6, 2024, 7:07pm UTC](https://zola.discourse.group/t/add-labels-to-code-blocks/2273/3 "2024-09-06T19:07:17Z")

</div>

Thanks! I also had the same question for images/figures. Is there a built-in way to add a label/caption to them?

If not, I will open issue(s) on GitHub and take a stab at it sometime…

---

<div class="post-metadata">

**Author:** ![welpo](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/welpo/32/1087_2.png) [@welpo](https://zola.discourse.group/u/welpo)\
**Post date:** [September 6, 2024, 7:21pm UTC](https://zola.discourse.group/t/add-labels-to-code-blocks/2273/4 "2024-09-06T19:21:48Z")

</div>

> [@kaimast](#):
>
> Is there a built-in way to add a label/caption to them?

Here’s three ways:

1. Write the HTML manually ([Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)).

2. See [this reply](https://zola.discourse.group/t/asset-colocation-within-shortcodes/120/2) for a simple shortcode to add figures with caption.

3. A quick search led me to [this shortcode](https://gist.github.com/asimpletune/a61b2ea07ece1e0fb563ea0aa9cfa37f) to insert a figure + citation within your markdown. I have not tested it.