Gatsbyjs LaTeX in .mdx files

Question

I am using Gatsbyjs for my website and I'm trying to be able to write LaTeX in my .mdx files but I cannot figure out why it is not rendering.

I followed this post: https://stackoverflow.com/a/71344589/2078908

Making a require-esm.js file

// Source: https://stackoverflow.com/a/71344589/2078908

const esm = require('esm')
const fs = require('fs')
const Module = require('module')


// Node: bypass [ERR_REQUIRE_ESM]
const orig = Module._extensions['.js']
Module._extensions['.js'] = function (module, filename) {
    try {
        return orig(module, filename)
    } catch (e) {
        const content = fs.readFileSync(filename, 'utf8')
        module._compile(content, filename)
    }
}

const _esmRequire = esm(module, {
    cjs: true,
    mode: 'all',
})

// don't pollute Module
Module._extensions['.js'] = orig

module.exports = function esmRequire(id) {
    return _esmRequire(id).default
}

and then added this in my gatsby-config.js file

require.esm = require('./require-esm')
module.exports = {
      plugins: [
      {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        remarkPlugins: [require.esm('remark-math')],
        rehypePlugins: [require.esm('rehype-katex')],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 600,
            },
          },
        ],
      },
   ],
}

Then, I have to add the css to the template, so I looked at this example: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-remark/src/templates/template-blog-post.js

And they say to add: import "katex/dist/katex.min.css" to my "template-blog-post.js" which I do not have, I have a ProjectList.jsx file, which I thought would be the same concept as the post, but it does not render the LaTeX.

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import {ContentContainer} from "../Common/Container";
import {ProjectWrapper} from "../Project/ProjectsStyles";
import Grid from '@mui/material/Grid';
import "katex/dist/katex.min.css";


export const query = graphql
        `
        query PostsByID($id: String!) {
            mdx(
                id: { eq: $id }
            ){
                body
                frontmatter {
                    title
                    subTitle
                    date
                    tags
                }
            }
        }
    `

const ProjectList = ({ data }) => {
    const { frontmatter, body } = data.mdx
    return (
        <>
            <ContentContainer>
                <ProjectWrapper className="right">
                    <Grid container spacing={0}>
                        <Grid item xs={12}>
                            <p>{frontmatter.date}</p>
                        </Grid>
                        <Grid item xs={12}>
                          <h2>{frontmatter.title} {frontmatter.subTitle}</h2>
                        </Grid>

                        <Grid item xs={12}>
                            <MDXRenderer>{body}</MDXRenderer>
                        </Grid>
                    </Grid>
                </ProjectWrapper>
            </ContentContainer>
        </>
    )
}

export default ProjectList;

This is all I get:

Gatsbyjs LaTeX in .mdx files

0 Answers0