Ajouter une classe CSS à un lien d'ancrage en markdown (Hugo)

Question

J'utilise des liens d'ancrage dans mon .markdown comme ceci :

# {#infrared}

Cela fonctionne bien, mais je voulais mettre en œuvre le CSS suivant pour que le lien défile au milieu de la page et non en haut :

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

Comment puis-je ajouter la classe anchor à mon lien d'ancrage dans le document markdown ?

Answer 1

Sur la base de cette réponse aquí nous avons :

D'après le README 1 de Goldmark, le processeur Markdown, c'est-à-dire actuellement activé par défaut dans Hugo :

Actuellement, seuls les titres supportent les attributs

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

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

Answer 2

Je pense que dans l'ensemble, markdown supporte les balises html ; par exemple, vous devriez pouvoir utiliser

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

mais de toute façon, s'il ne fonctionne pas vraiment, vous avez peu d'autres options. Par exemple "Attributs de code clôturés" :

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

And another.
```

C'est vraiment un exemple copié de la documentation, plus d'options sont réellement disponibles ici : https://lifelongprogrammer.blogspot.com/2019/01/how-to-style-markdown-with-css.html