CODEWITHSUNDEEP
htmlcssr-markdownblogdownhugo-theme
mzkrc
mzkrc

Reputation: 419

How to change the background color for inline codes and code chunks in Hugo-apero blogdown

Recently, I would like to make some changes with my personal website, made with Hugo Apéro and blogdown, and what I would like to do initially is to change the the background color for inline codes and code chunks. Based on my web search, I found out some solutions to customize the background color for codes using css. However, more specifically, I would like to be able to customize the background color for inline codes and code chunks differently. To make it more clear, the background for the inline code is seen as the following;

enter image description here

while the code chunk is seen as

enter image description here

Now, what I want to achieve is to set the background color to green only for the inline codes while setting the background color to white for the code chunk. I tried to do that using some css but it did not work out as these two were listed under the same category of code in css and therefore I could not make it. I do appreciate if you have solutions to solve this problem. Here is my GitHub repo link for this post in case you might want to look at it:

https://github.com/muhammetozkaraca/hugo-apero-website/tree/main/content/blog/map

Thank you for your time beforehand.

Upvotes: 2

Views: 368

Answers (1)

Yihui Xie
Yihui Xie

Reputation: 30174

Use a CSS selector to define the background color for <code> that is not a child of <pre>:

:not(pre) > code {
  background-color: #0b903f;
}

instead of

code {
  background-color: #0b903f;
}

Upvotes: 2

Related Questions