CSS class to markdown post files

[Pmgeo]

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!

[irkode]

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:

• shortcode in Markdown

  customize the build in shortcode (ref) or create your own (maybe (refPdf) (Shortcode templates)

• custom link render hook
  copy the code and add your class for that specific stuff see (Link render hooks)

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)
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