reactjsgatsbymdx

Gatsby MDX not rendering properly

I am making a website which has a blog. I am using Gatsby and following this tutorial. I figured out how to use JSX components in MDX such as my Layout component which I wish to apply to all pages - blogs and non-blogs. Here is the code in my MDX file right now:

import Layout from "../components/layout";

<Layout>

# Testing header 1

## Testing header 2 and math
$f(x) = 2$

</Layout>

What I see on the website is this: enter image description here

The markdown-specific syntax is not being applied (e.g. headers and LaTeX). I have properly installed all the packages listed in the tutorial I linked:

enter image description here

My gatsby-config.ts is also properly updated with gatsby-plugin-mdx and gatsby-source-filesystem.

enter image description here

I don't understand why the markdown syntax and the math is not being rendered properly. I tried it even without wrapping the MDX in a JSX component as I've done below but that didn't work either.

What could be causing this issue?

Solution

  • I figured it out. Actually it was rendering properly but I just didn't have any styles. I did not realize that I had to write my own styles and the MDX just took care of rendering markdown but not styling it.

    Here is my full discussion with a helpful maintainer of the mdx-js forum who explained this to me