da32034525
## 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>
27 lines
459 B
JavaScript
27 lines
459 B
JavaScript
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);
|
|
},
|
|
"",
|
|
],
|
|
},
|
|
},
|
|
};
|