Adding CSS class to anchor link in markdown (Hugo)

Question

I'm using anchor links in my .markdown document like so:

# {#infrared}

This works fine but I wanted to implement the following CSS so that the link scrolls to the middle of the page and not at the top:

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

How can I add the class anchor to my anchor link in the markdown document?

Answer 1

Based on this answer here, we have:

As per the README 1 of Goldmark the Markdown processor that is currently turned on by default in Hugo:

Currently only headings support attributes…

## heading ## {#id .className attrName=attrValue class="class1 class2"}
 
## heading {#id .className attrName=attrValue class="class1 class2"}