# CSS class to markdown post files

**URL:** <https://discourse.gohugo.io/t/css-class-to-markdown-post-files/51761>\
**Category:** support\
**Created:** [October 1, 2024, 4:53pm UTC](https://discourse.gohugo.io/t/css-class-to-markdown-post-files/51761 "2024-10-01T16:53:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pmgeo](https://avatars.discourse-cdn.com/v4/letter/p/13edae/32.png) [@Pmgeo](https://discourse.gohugo.io/u/Pmgeo)\
**Post date:** [October 1, 2024, 4:53pm UTC](https://discourse.gohugo.io/t/css-class-to-markdown-post-files/51761/1 "2024-10-01T16:53:59Z")

</div>

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](https://github.com/Discopigeononline/Creatip)

Thank you very much!

---

<div class="post-metadata">

**Author:** ![irkode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/irkode/32/26135_2.png) [@irkode](https://discourse.gohugo.io/u/irkode)\
**Post date:** [October 1, 2024, 7:22pm UTC](https://discourse.gohugo.io/t/css-class-to-markdown-post-files/51761/2 "2024-10-01T19:22:10Z")

</div>

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

- custom link render hook  
copy the code and add your class for that specific stuff see ([Link render hooks](https://gohugo.io/render-hooks/links/#default))

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](https://gohugo.io/getting-started/configuration-markup/#rendererunsafe))  
> **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:

- use this in your markdown file

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

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 9, 2024, 9:00am UTC](https://discourse.gohugo.io/t/css-class-to-markdown-post-files/51761/3 "2024-10-09T09:00:49Z")

</div>

Closed on October 9, 2024, 9:00am UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.