mathpix-markdown-it 2.0.36 → 2.0.37

package/README.md

@@ -854,10 +854,12 @@ The `MathpixMarkdown` React element accepts the following props:
 |                                                    | returns | description                                                                                                               |         |
 |----------------------------------------------------|---------|---------------------------------------------------------------------------------------------------------------------------|---------|
 | **Style methods:**                                 |         |                                                                                                                           |         |
+| buildStyles(opts?: [StyleBundleOpts](https://github.com/Mathpix/mathpix-markdown-it#stylebundleopts)) | string | Single CSS builder. All style assembly methods delegate here. Modules toggled via opts.                                   |         |
 | loadMathJax()                                      | boolean | Adds a style element into the head of the document and returns true. In case of an error, returns false.                  |[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-markdownToHTML-method)|
-| getMathpixStyleOnly()                              | string  | returns styles as a string.                                                                                               |         |
-| getMathpixStyle(true)                              | string  | returns styles as a string including styles for container.                                                                |[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-render-method)|
-| getMathpixFontsStyle()                             | boolean | returns fonts styles as a string.                                                                                         |[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-render-method)|
+| getMathpixStyleOnly(useColors?)                     | string  | Styles for embedded widget (no container/preview).                                                                        |         |
+| getMathpixStyle(stylePreview?, showToc?, tocContainerName?, useColors?, isPptx?) | string | Full page styles including container.                                                                                     |[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-render-method)|
+| getMathpixFontsStyle()                             | string  | Returns fonts styles as a string.                                                                                         |[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-render-method)|
+| getMaxWidthStyle(maxWidth?, isHideScroll?)         | string  | Returns CSS for math/tabular max-width constraints and optional scrollbar hiding.                                         |         |
 | **Render methods:**                                |         |                                                                                                                           |         |
 | markdownToHTML(str, options: [TMarkdownItOptions](https://github.com/Mathpix/mathpix-markdown-it#tmarkdownitoptions)) | string  | Renders input text to html element as a string.                                                                           |[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-markdownToHTML-method)|
 | render(str, options: [optionsMathpixMarkdown](https://github.com/Mathpix/mathpix-markdown-it#optionsmathpixmarkdown))     | string  | Renders input text to  HTML element as a string and wraps it in a container. Should be used to render the entire document.|[example](https://github.com/Mathpix/mathpix-markdown-it/tree/master/examples/react-app/use-render-method)|
@@ -867,6 +869,24 @@ The `MathpixMarkdown` React element accepts the following props:
 
 
 
+### StyleBundleOpts
+
+|                          | type *`default`*         | description                                                |
+|--------------------------|-------------------------------|------------------------------------------------------------|
+| `setTextAlignJustify`    | boolean *`false`*        | Enables `text-align: justify` on content blocks            |
+| `useColors`              | boolean *`true`*         | When `false`, omits color declarations from CSS output     |
+| `maxWidth`               | string *`''`*            | Sets max-width for math/tabular containers (e.g. `'800px'`)|
+| `isPptx`                 | boolean *`false`*        | Adjusts layout for PowerPoint export                       |
+| `resetBody`              | boolean *`false`*        | Includes body margin/line-height reset                     |
+| `container`              | boolean *`false`*        | Includes base element styles (headings, links, tables etc) |
+| `mathjax`                | boolean *`false`*        | Includes MathJax stylesheet                                |
+| `code`                   | boolean *`true`*         | Includes syntax-highlighting styles                        |
+| `preview`                | boolean *`false`*        | Includes `#preview` wrapper styles                         |
+| `toc`                    | boolean *`false`*        | Includes table-of-contents styles                          |
+| `tocContainerName`       | string *`'toc'`*        | ID of the TOC container element                            |
+| `menu`                   | boolean *`false`*        | Includes context-menu and clipboard styles                 |
+
+
 ### TMarkdownItOptions
 
 |                                       | type *`default`*        |  description                                                                                                           |

package/doc/changelog.md

@@ -1,3 +1,35 @@
+# March 2026
+
+## [2.0.37] - CSS scoping and style module cleanup
+
+- CSS Scoping:
+  - All MMD class selectors now have `#preview-content`/`#setText` scoped variants for specificity boost.
+  - Bare selectors preserved as fallback for `markdownToHTML()` (no wrapper).
+
+- Style Architecture:
+  - New `buildStyles(opts: StyleBundleOpts)` single CSS builder — all assembly methods delegate here.
+  - `MathpixStyle` restructured into 10 composable sub-functions.
+  - Color constants extracted into `src/styles/colors.ts`.
+  - `halpers.ts` renamed to `helpers.ts`.
+
+- Improvements:
+  - `.tabular` now renders consistently regardless of context (standalone vs nested inside a list). Previously, list context could affect table width and font size via cascade. Fixed with explicit `margin: 0 0 1em`, `font-size: inherit`, and other defensive defaults.
+  - `useColors=false` now correctly omits blockquote border, table border, and mark background colors.
+  - `getMathpixStyle(useColors=false)` now also omits `ContainerStyle` colors (body text, headings, links, captions). Previously `ContainerStyle()` was always called with default colors.
+
+- Bug Fixes:
+  - `div.svg-container` child combinator consistency (`>` for both `#preview-content` and `#setText`).
+  - `loadMathJax` updates existing `#Mathpix-styles` element instead of skipping.
+
+- Breaking Changes:
+  - `scaleEquation` parameter removed from `loadMathJax`, `getMathpixStyleOnly`, `getMathpixStyle`, and `getMathpixMarkdownStyles`. It was never used in CSS output. If you were passing it positionally, shift your arguments. Use `buildStyles(opts)` for a named-parameter alternative.
+
+- Dead Code Removed:
+  - `.empty` selector (never generated), `.preview-right` selector (used as id, not class).
+
+- Docs:
+  - Added implementation details in `pr-specs/2026-03-mmd-css-scoping.md`.
+
 # February 2026
 
 ## [2.0.36] - 16 February 2026