Hi, I am making a website using Gatsby.js and I will have a blog in this website. I am trying to use MDX pages in Gatsby.js to be properly render math (e.g. LaTeX or KaTeX) and markdown syntax. I have looked at both of these tutorials (Adding MDX pages and Adding Markdown Pages).
For example, I have a
And I've wrapped my MDX in a JSX component as you can see here. However, when I display it, the wrapping with the JSX component works, but right now the MDX is not rendering properly:
Right now, when I run
I have all the required packages for the rendering I believe.
I also create my project with
My gatsby config file is proper too:
I'm really confused about why it's not rendering properly. Any help would be appreciated. Thanks!
For example, I have a
sample.mdx
file with this code:
Code:
import Layout from "../components/layout";
<Layout>
# Testing header 1
## Testing header 2 and math
$f(x) = 2$
</Layout>
And I've wrapped my MDX in a JSX component as you can see here. However, when I display it, the wrapping with the JSX component works, but right now the MDX is not rendering properly:
Right now, when I run
npm list
:I have all the required packages for the rendering I believe.
I also create my project with
npm init gatsby
if that makes a difference.My gatsby config file is proper too:
I'm really confused about why it's not rendering properly. Any help would be appreciated. Thanks!