Search code examples
htmlcssr-markdownblogdownhugo-theme

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.

Solution

  • 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;
}