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 = {
|
||||
tex: {
|
||||
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