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:
parent
c2cc2148c0
commit
da32034525
@ -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);
|
||||||
|
},
|
||||||
|
"",
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user