code formating seems to be broken

[slashformotion]

https://www.getzola.org/themes/papaya/

checked with chrome and firefox

[Keats]

That's really weird

[welpo]

There's a styling conflict where code elements within list items (li) are being styled identically to inline code tags. The problem arises when these code tags are already inside a pre block for codeblocks.

The problematic CSS:

p code,
li code {
  background-color:#f5f5f5;
  white-space:pre-wrap;
  padding:5px;
  border-radius:5px;
  font-size:.85rem;
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.1),0 2px 1px -1px rgba(0,0,0,.12)
}

Solutions

Using the not() pseudo-class

code elements within pre tags inside list items can be excluded by employing the :not() pseudo-class:

p code,
li code:not(pre code) {
  /* Styles for inline code */
}

Using the direct child > combinator

By using the direct child combinator, styling is only applied to code tags that are direct children of either p or li, thus excluding those nested inside other tags:

p > code,
li > code {
  /* Styles for inline code */
}

[Keats]

This should be fixed on the Zola repo though

[welpo]

Indeed. I just found the lines (was looking through browser before): https://github.com/getzola/zola/blob/695c17d2222e2ee3f83d304d0828265b1c7407cf/docs/sass/_base.scss#L111-L118

I can do a PR in the Zola repo if you'd like. Perhaps the not() solution is less fragile.

[Keats]

Yep, please do a PR, I prefer the not as well

[welpo]

Fixed in getzola/zola#2273