Fix issue causing no color inversion when rendering equations (#2956)

## Problem Description

When dark mode is enabled, inline math expressions rendered using
`$...$` in distill-style blog posts are displayed in black text. This
makes them difficult to read against the dark background. The issue
occurs because the default styles for MathJax-rendered content do not
account for dark mode and set the text color to black.

## Proposed Solution

This PR updates the MathJax setup to dynamically apply inline styles to
ensure the text color of MathJax-rendered content inherits the parent
container’s color. Specifically:
- Added a custom action in the _MathJax.options.renderActions_ section
to inject a CSS rule that sets _.mjx-container_ to inherit its color
from its parent element.
- Ensures that inline math expressions render correctly in both light
and dark modes without explicitly setting a fixed color.

## Changes Made
Modified the _mathjax-setup.js_ file to include:
- Custom inline styles injected via JavaScript for _.mjx-container_
elements.
- Explicit handling of _inlineMath_ delimiters to ensure consistency in
rendering.

## Testing and Validation
- Tested the fix in both light and dark modes to confirm that inline
math expressions render in the correct color.
- Verified that the changes do not introduce regressions in light mode
or affect block math expressions rendered using `$$...$$`.

## Impact
- Improves readability of inline math expressions in dark mode.
- Provides a consistent user experience for distill-style blog posts
across light and dark themes.
- Resolves #2915

Co-authored-by: Suraj Khamkar <surajk@atlanticpkg.com>
This commit is contained in:
Suraj Khamkar 2025-01-15 21:11:44 -05:00 committed by GitHub
parent c2cc2148c0
commit da32034525
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,5 +1,26 @@
window.MathJax = { window.MathJax = {
tex: { tex: {
tags: "ams", tags: "ams",
inlineMath: [
["$", "$"],
["\\(", "\\)"],
],
},
options: {
renderActions: {
addCss: [
200,
function (doc) {
const style = document.createElement("style");
style.innerHTML = `
.mjx-container {
color: inherit;
}
`;
document.head.appendChild(style);
},
"",
],
},
}, },
}; };