Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Katex rendering not working with MDX

See original GitHub issue

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

Clone the repository
npm install
npm run develop
Open http://localhost:8000/info/
Verify the equation rendering

Website

Expected behaviour

What should happen?

Actual behaviour

What happens instead?

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

nikoladevcommented, Dec 18, 2020

@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.

1reaction

sonapraneeth-acommented, Dec 21, 2020

The workaround by @nikoladev works. Thanks 👍

Top Results From Across the Web

Next.js MDX rendering problem with remark-math and rehype ...

I am using MDX in my NEXT.JS project with the react-math and rehype-katex plugins. When I render the MDX files it gives me...

Common Issues - KaTeX

Common Issues. Be sure to include <! ... KaTeX follows LaTeX's rendering of aligned and matrix environments unlike MathJax. When displaying fractions one ......

Adding math support to a Gatsby MDX blog - Nicky Meuleman

The KaTeX CSS file needs to be imported on a page to render the math correctly. You can do this manually in every...

Math - MDX

This guide explores how to support math (LaTeX) in MDX. MDX supports standard markdown syntax (CommonMark). That means math is not supported ......

@mdx-js/mdx - npm

Dev Dependencies (15) · @emotion/react · @mdx-js/react · nanoid · preact · preact-render-to-string · react · react-dom · rehype-katex ...