CODEWITHSUNDEEP
htmlcssmarkdownhugo
Aman
Aman

Reputation: 417

Adding CSS class to anchor link in markdown (Hugo)

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?

Upvotes: 4

Views: 2251

Answers (2)

snoh666
snoh666

Reputation: 139

I think overall markdown supports html tags for example you should be able to use

<p class="anchor">text...</p>

but either way if It wont really work you have few other options. For example "Fenced Code Attributes":

```{.red .numberLines startFrom="1"}
Here is a paragraph.

And another.
```

This is really example copied from docs, more options really are available here: https://lifelongprogrammer.blogspot.com/2019/01/how-to-style-markdown-with-css.html

Upvotes: 2

Aman
Aman

Reputation: 417

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"}

Upvotes: 3

Related Questions