Hi all. The CSS of the code block declaration in bootstrap is overridden by the syntax-highlighting.scss class in varnish. @ErinBecker is correct that inheritance is in play here, but as the syntax-highlighting.scss inherits from the bootstrap code class, but doesn't specify its own color, then it will inherit the bootstrap color. We can override this by adding a specific color property in the syntax-highlighting.scss class:
We could also specify a background colour (#FFF) for the code instead of modifying the established palette so that we ensure it's accessible everywhere
Hi all. The CSS of the code block declaration in bootstrap is overridden by the syntax-highlighting.scss class in varnish. @ErinBecker is correct that inheritance is in play here, but as the syntax-highlighting.scss inherits from the bootstrap code class, but doesn't specify its own color, then it will inherit the bootstrap color. We can override this by adding a specific color property in the syntax-highlighting.scss class:![image](https://github.com/carpentries/workbench/assets/1872302/6604db92-7da5-485e-8ab7-5d95151da34a)
Originally posted by @froggleston in https://github.com/carpentries/workbench/issues/76#issuecomment-1794740161
We could also specify a background colour (
#FFF
) for the code instead of modifying the established palette so that we ensure it's accessible everywhere