Math blocks in gatsby-starter-minimal-blog

[FernandoChu]

First of all, thanks for you templates, they are wonderful!

I am trying to use the math block functionality from mdx in gatsby-starter-minimal-blog. The problem is, I believe, that the mdx settings are inside gatsby-starter-minimal-blog-core and those can't be shadowed as usual; since shadowing only works for files inside the src folder of the theme and gatsby-config.js is in the root folder of the theme.

Trying to configure it in gatsby-config in the root folder as per this, does not work, I guess because it's somehow conflicting with gatsby-starter-minimal-blog-core.

// gatsby-config.js
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    remarkPlugins: [require(`remark-math`)],
    rehypePlugins: [require(`rehype-katex`)]
  }
}

How should I add this functionality in this template? Or, in general, what is the correct way to add remark/rehype plugins?
Thanks.

[LekoArts]

Thank you for opening this!

As laid out in the theme options you can pass in the option mdx: false to @lekoarts/gatsby-theme-minimal-blog which will pass this down to the -core theme.

This way you'll disable this whole block:

gatsby-themes/themes/gatsby-theme-minimal-blog-core/gatsby-config.js

Lines 23 to 48 in 4e71c90

	mdx && {
	resolve: `gatsby-plugin-mdx`,
	options: {
	extensions: [`.mdx`, `.md`],
	gatsbyRemarkPlugins: [
	{
	resolve: `gatsby-remark-images`,
	options: {
	maxWidth: 960,
	quality: 90,
	linkImagesToOriginal: false,
	},
	},
	],
	plugins: [
	{
	resolve: `gatsby-remark-images`,
	options: {
	maxWidth: 960,
	quality: 90,
	linkImagesToOriginal: false,
	},
	},
	],
	},
	},

Then in your own gatsby-config.js you can copy/paste my config and merge it with yours:

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.mdx`, `.md`],
	remarkPlugins: [require(`remark-math`)],
    rehypePlugins: [require(`rehype-katex`)]
    gatsbyRemarkPlugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 960,
          quality: 90,
          linkImagesToOriginal: false,
        },
      },
    ],
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 960,
          quality: 90,
          linkImagesToOriginal: false,
        },
      },
    ],
  },
}

This way you defined your own instance of gatsby-plugin-mdx with your desired plugins.