remark-katex @mdx-js/rollup integration

[arnfaldur]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

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:

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]

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]

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]

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]

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]

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]

@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[bot]]

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