Automatically numbering Figures in Markdown

If you're writing academic style documents in Markdown/HTML it can be handy to be able to automatically number the figures. Here's how to do that using HTML and CSS.

Three Placeholder Figures rendered in a row with automatic figure numbering displayed on the first (Fig 1) and last (Fig 3).
Automatic Fig number generation in Markdown documents using HTML/CSS

Markdown is really powerful, both for it's simplicity and for the fact that it can be extended by using HTML/CSS.

This allows you to do things that Markdown can't natively such as adding a caption to a figure:

<figure id="my-image">
	<img src="my_image.jpg" alt="don't forget to put some alt text here">
	<figcaption>This will be rendered below the image</figcaption>

And even automatically numbering them by setting up a css counter in an internal <style> block. Fortunately for what we're about to do, <style> blocks do not have to be in the document <head> to work.

    /* initialise the counter */
    body { counter-reset: figureCounter; }
    /* increment the counter for every instance of a figure even if it doesn't have a caption */
    figure { counter-increment: figureCounter; }
    /* prepend the counter to the figcaption content */
    figure figcaption:before {
        content: "Fig " counter(figureCounter) ": "

Now every <figcaption> will be prepended with a fig number that is associated with it's location, even if you don't caption one of them.

placeholder kitten from
First fig
placeholder kitten from
placeholder kitten from
Last fig

Special Cases


Although this will work for most markdown editors, it does not work in Obsidian. However, should you want to recreate the behaviour there you can do so by creating an appropriately named css file in <vault>/.Obsidian/snippets and then activating the snippet via Settings > Appearance > CSS Snippets.


If you use Ghost you will find that this method as written targets the Feature Image as well as any images you have defined as <figure> yourself. To get around that you can target .gh-content:

.gh-content { counter-reset: figureCounter; }
.gh-content figure { counter-increment: figureCounter; }
.gh-content figure figcaption::before {
    content: "Fig " counter(figureCounter) ": "


How to Automatically Number Elements with CSS Counters
CSS counters are used to add counts to elements. The count is added by providing variables that can be initialized (using counter-reset), and these variables can then be incremented by CSS rules. Many developers overlook this powerful CSS feature, and that is why we are going to go over
Numbered Headings in Markdown via CSS
Numbered Headings in Markdown via CSS. GitHub Gist: instantly share code, notes, and snippets.
Obsidian CSS Snippets
I have not written a full post on how I use Obsidian yet but I talked about it in the first post here. I plan to write more in the future but for the mean time I just wanted to put my main edits online for others who may care enough to find them.

Comments powered by Talkyard.