set styling using CSS & HTML?

[JacobBeaudry]

I've noticed that inline math will inherit some styling from its parent HTML element, e.g.,

<p style='color:blue; background-color:yellow'>
 Hello Euler $e^{i\pi} + 1 = 0$
</p>

will produce:

however, other styling elements, notably the font-weight, are not inherited. Is this configurable behaviour?

N.B. I'm not a programmer -- I'm the main content creator on a very small project, where our dev team is swamped, so I just offered to start looking into the this issue, to save them a bit of work 😃 We'd like to set things up so that math included in h1's are automatically rendered in bold, and so that custom classes for inline content handle both text and math content.

[edemaine]

I think the short answer is "no, it's not configurable".

I've wanted bold inheritance in my own projects too, and what I do in that case is optionally wrap the relevant math in \boldsymbol{...}. In my context, I'm calling KaTeX's renderToString directly, so I just detect at that point whether to wrap in \boldsymbol (depending on whether I'm rendering a header or something else).

If you're using auto-render, you could make multiple calls, something like this:

renderMathInElement(document.body, {
    ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code", "option", "h1"] // added h1 to the default list
});
document.querySelectorAll('h1').forEach((header) => {
    renderMathInElement(document.body, {
        preProcess: (math) => `\\boldsymbol{${math}}`
    });
});

[JacobBeaudry]

Thanks Erik, greatly appreciate your generosity with your time and knowledge; thank you for sharing.

[JacobBeaudry]

FYI -- we were able to get this working just via CSS (wasn't sure if you'd be notified as to the new reply on this thread); haven't tested it thoroughly, yet, so perhaps there are issues that weren't immediately apparent.

[edemaine]

Interesting -- thanks for the data!

[JacobBeaudry]

We were able to get this working on our setup by setting font-weight: inherit in our local CSS .katex class.