Unable to style <code> element using CSS class

[burnoutberni]

Sorry if this is very specific, but I'm stuck with an issue with WeasyPrint and I hope someone here can help me:

I use WeasyPrint via pandoc for a static-site project to also generate a PDF version of the website (you can find the source here).

I have a bunch of <code> elements that are styled depending on their CSS classes (all have the class tag and another class e.g. must to determine which type of tag it is) and this works successfully in the browser. I apply different styles using @print as well, since browser drop the background-color, but that shouldn't be relevant here.

Turns out in WeasyPrint, it seems like for some reason, I cannot style these elements at all using classes. I've tried a bunch of things, but I was unable to figure out a solution for this, so by now I'm thinking this might be a bug.

/* Works */
code {
  background-color: red;
}

/* Doesn't work */
.tag {
  background-color: red;
}

Here's the output of WeasyPrint, but I don't see anything relevant here:

WARNING: Ignored `box-shadow: 0px 1px 0px 1px rgba(0,0,0,0.1)` at 84:3, unknown property.
WARNING: Ignored `max-width: calc(100% - 0.8rem)` at 118:3, invalid value.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.1)` at 168:3, unknown property.
WARNING: Ignored `box-shadow: none` at 187:3, unknown property.
WARNING: Ignored `height: calc(100vh - 2rem)` at 217:3, invalid value.
WARNING: Ignored `overflow-y: scroll` at 218:3, unknown property.
WARNING: Ignored `user-select: none` at 276:3, unknown property.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px rgba(0,0,0,0.1)` at 277:3, unknown property.
WARNING: Ignored `user-select: none` at 308:3, unknown property.
WARNING: Expected a media type, got screen/**/and/**/(max-width: 1024px)
WARNING: Invalid media type " screen and (max-width: 1024px) " the whole @media rule was ignored at 349:1.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px #060` at 397:5, unknown property.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px #a00` at 401:5, unknown property.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px #2c2` at 405:5, unknown property.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px #d46` at 409:5, unknown property.
WARNING: Ignored `box-shadow: 0px 1px 0px 1px #ea5` at 413:5, unknown property.
WARNING: Ignored `overflow-y: auto` at 445:5, unknown property.
WARNING: Anchor defined twice: language-en
WARNING: Anchor defined twice: language-de

Any help – including pointers what I'm doing wrong, if so – would be really appreciated.

[Tontyna]

This html (when given to WeasyPrint directly) renders the <code> text with red background:

<style>
.tag {
    background-color: red;
}
</style>
<div>
  lorem ipsum <code class="tag">tagged code</code> dolor sit amet
</div>

So I assume it's pandoc eating up the class attribute.

[Tontyna]

Ah no, it's not pandoc eating up anything -- the class attributes are supposed to be applied by script.js -- but WeasyPrint doesn't execute JavaScript.
Cf. #817

[burnoutberni]

Oh, right, that makes sense. Thanks, I'll close the issue and try to figure out the rest for myself. Thanks a lot for your help!