CSS class to markdown post files

support
1

Hello!

I have my post folders in a folder. Each folder contains a pdf file and an index.md with the frontmatter and just the link as follows: Click here to access the pdf. I would like to set a class to the “Click here to access the pdf” text so it would englobe all posts and add some CSS love to that text.

I have seen a few posts saying the only way to go is a shortcode but I am not sure to understand the underlying logic of it and if it applies to my case. Also these posts were all from at least 3-4 years ago.

For full info, the repo is here: GitHub - Discopigeononline/Creatip: Code source pour le site JAMStack de l'association Creatip

Thank you very much!

2

just to get the point for me: Why cant you just using the a selector in your sass/css?

if you want to add classes to the HTML a tag, you will have to either:

the shortcode is easier, as you can have one exactly for these PDFs - if you want to style ALL markodwn links, than the Render Hook would be a good choice.

You could also:

enable inline HTML for markdown

(Configure markup | Hugo)
renderer.unsafe
(bool) If true, Goldmark renders raw HTML mixed within the Markdown. This is unsafe unless the content is under your control. Default is false.

  • add this to your config:

    [markup.goldmark.renderer]
    unsafe = true

  • use this in your markdown file

    <a class="pdf-link" href="./Bernard_et_al_2024_Frontiers_in_public_health.pdf">Click here</a>

workaround : use a layout file

This will only apply if you want ALL links in your content/recherche to be styled the same.

  • copy layouts/_default/single.html to layouts/recherche/single.html

  • change class="content-wrap" to class="content-wrap pdflinks"

  • add a selector to your sass file

    .pdflinks a {
  color: red;
  background-color: yellow;
}

workaround : page specifc css // conditional single partial

This will only apply if you want ALL links in your content/recherche to be styled the same.

you could an additional stylesheet to your recherche using conditionals in base-of, create new baseof for recherche