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;