remarkjs/remark-math

remark-katex @mdx-js/rollup integration

arnfaldur opened this issue · 7 comments

arnfaldur commented

Initial checklist

Problem

When using remark-katex with @mdx-js/rollup much of the css gets messed up.
It took me quite a few hours to figure out that the issue is with style properties that don't get converted from camelCase to kebab-case in the final generated html.

This causes thick \frac bars, malformed \sqrt that overlaps it's contents, and likely other issues.
This $$ \frac{\sqrt{a^2 + b^2}}{e^{e^e}} $$ was rendered like this:
2023-06-15--10-43-39-555

Solution

This is easy to solve once you know the trick which is the stylePropertyNameCase option:

import mdx from "@mdx-js/rollup";
//...
mdx({
  remarkPlugins: [remarkMath,],
  rehypePlugins: [rehypeKatex,],
  stylePropertyNameCase: "css",
})

I have some other tools like remarkGfm, SolidJS and its static adapter and I don't know if this solution is specific to them.

Alternatives

I'm partially posting this here so this can be found by others.

I also think that it would be useful to document this integration issue somewhere. I'm not sure where it would be best to document it. The issue is hard to figure out as there are no warnings or errors generated and it requires spotting subtly invalid CSS in the large and complex HTML tree that is generated by katex.

wooorm commented

SolidJS

Yes, your configuration is specific to Solid.
Solid currently doesn’t like JSX very much. Their implementation of the jsx APIs changed a bit over time.

Does solid-js/h otherwise work for you?

The docs for this would go here: https://mdxjs.com/docs/getting-started/#solid

arnfaldur commented

Interesting. I'm using solid start and the package solid-jsx as a jsx import source. Seems to work well with those settings. I'll take a look at using solid-js/h.

wooorm commented

solid-jsx does a lot of the things that are now done by MDX, with the stylePropertyNameCase (you should also do elementAttributeNameCase: 'html' btw).

Last I checked, solid-js/web works in browsers, but Solid itself doesn’t work in Node yet, hence something like solid-jsx is needed?

Can you please provide more info on your set up? What else do you use?

arnfaldur commented

Using solid-js/h as an import source gives the error The requested module 'solid-js/web' does not provide an export named 'SVGElements'.

These are the contents of my vite.config.ts file:

import { defineConfig } from "vite";

import mdx from "@mdx-js/rollup";
import solid from "solid-start/vite";
import staticAdapter from "solid-start-static";

import remarkGfm from "remark-gfm";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import remarkMdxImages from "remark-mdx-images";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default defineConfig({
  base: "/",
  plugins: [
    {
      ...mdx({
        jsxImportSource: "solid-jsx",
        remarkPlugins: [remarkGfm, remarkMdxImages, remarkFrontmatter, remarkMdxFrontmatter, remarkMath,],
        rehypePlugins: [rehypeKatex,],
        stylePropertyNameCase: "css",
        elementAttributeNameCase: "html",
      }),
      enforce: "pre",
    },

    solid({ adapter: staticAdapter(), extensions: [".mdx", ".md"] }),
  ],
});

and here are all the package.json dependencies:

{
  "devDependencies": {
    "@mdx-js/rollup": "^2.3.0",
    "solid-start-static": "^0.2.26",
    "typescript": "^4.9.4",
    "vite": "^4.1.4"
  },
  "dependencies": {
    "@solidjs/meta": "^0.28.2",
    "@solidjs/router": "^0.8.2",
    "rehype-katex": "^6.0.3",
    "remark-frontmatter": "^4.0.1",
    "remark-gfm": "^3.0.1",
    "remark-math": "^5.1.1",
    "remark-mdx-frontmatter": "^3.0.0",
    "remark-mdx-images": "^2.0.0",
    "solid-js": "^1.7.2",
    "solid-jsx": "^0.9.1",
    "solid-start": "^0.2.26",
    "undici": "^5.15.1"
  },
}

I can tell you more if you are interested but as you suggested, it might be best to just close this issue and mention this to the MDX people.

wooorm commented

I am the MDX people :)

If you’re interested, I’d appreciate you working on updating the getting started docs?
I can advise. It would likely be in line with https://github.com/syntax-tree/hast-util-to-jsx-runtime#example-solid, which I did a couple months ago

ChristianMurphy commented

@arnfaldur a PR to mdx would be welcome!
If you have any questions feel free to reach out for guidance, I'm also a maintainer of mdx.
In the meantime closing this issue, as this documentation would live in mdx not remark-math

github-actions commented

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.