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> |
||
|---|---|---|
| .. | ||
| audio | ||
| bibliography | ||
| css | ||
| fonts | ||
| html | ||
| img | ||
| js | ||
| json | ||
| jupyter | ||
| plotly | ||
| video | ||
| webfonts | ||