Katex rendering not working with MDX

[sonapraneeth-a]

Subject of the issue

Math blocks not rendering properly when using KaTeX with MDX

Your environment

• OS: Ubuntu 20.04 (But the issue is not related to OS)
• Packages:
  • gatsby-plugin-mdx
  • katex
  • gatsby-remark-katex
• Env:
  • yarn: 1.22.5

System:
    OS: Linux 4.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.15.1 - ~/Softwares/node/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.8 - ~/Softwares/node/bin/npm
  npmPackages:
    gatsby: 2.28.1 => 2.28.1
    gatsby-image: 2.7.0 => 2.7.0
    gatsby-plugin-manifest: 2.8.0 => 2.8.0
    gatsby-plugin-mdx: 1.6.0 => 1.6.0
    gatsby-plugin-offline: 3.6.0 => 3.6.0
    gatsby-plugin-react-helmet: 3.6.0 => 3.6.0
    gatsby-plugin-sharp: 2.10.1 => 2.10.1
    gatsby-remark-katex: ^3.6.0 => 3.6.0
    gatsby-source-filesystem: 2.7.0 => 2.7.0
    gatsby-transformer-sharp: 2.8.0 => 2.8.0
  npmGlobalPackages:
    gatsby: 2.28.1

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

Repo link

1. Clone the repository
2. npm install
3. npm run develop
4. Open http://localhost:8000/info/
5. Verify the equation rendering

Website

Expected behaviour

What should happen?

Actual behaviour

What happens instead?

[wooorm]

Probably this Gatsby issue: gatsbyjs/gatsby#28031

[sonapraneeth-a]

It looks to be a different issue as even the simplest math formulas are not rendering as opposed to complex formulas in the attached issue.

[wooorm]

Hmm, might be?
Regardless, gatsby-plugin-mdx and gatsby-remark-katex are gatsby projects, and to my knowledge often don’t work.
I see you’ve already asked there btw: gatsbyjs/gatsby#28546.

I would personally avoid gatsby-remark-* projects.
You can also use normal remark and rehype plugins: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx#remark-plugins.
remark-math and rehype-katex should do the trick

[nikoladev]

@sonapraneeth-a The solution of using regular remark and rehype plugins that @wooorm proposed should work. This is how I set it up to work.

[sonapraneeth-a]

The workaround by @nikoladev works. Thanks 👍