[gatsby-remark-katex] Doesn’t work with gatsby-plugin-mdx #21866

leafac · 2020-02-29T20:49:16Z

Description

I followed the instructions to install gatsby-remark-katex on a website using gatsby-plugin-mdx and it didn’t work. No errors, no nothing, it just didn’t transform the LaTeX in the Markdown.

Steps to reproduce

In this zip there are two projects:

doesnt-work: This is a minimal project to show the issue. To create this project I just followed the instructions to install gatsby-remark-katex.

works: This is a workaround I found based on this comment and the documentation for remark-math, in which they suggest to use rehype-katex instead of remark-html-katex.

You can run the projects with the usual npm install && npx gatsby develop and visit http://localhost:8000.

In summary, the difference is instead of:

// doesnt-work
$ npm install gatsby-transformer-remark gatsby-remark-katex katex

// gatsby-config.js
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    gatsbyRemarkPlugins: [`gatsby-remark-katex`]
  }
}

you do:

// works
$ npm install remark-math rehype-katex katex

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

Expected result

The LaTeX in the Markdown should be rendered.

Actual result

The LaTeX in the Markdown appears unmodified.

Environment

System:
  OS: macOS 10.15.3
  CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Shell: 5.7.1 - /bin/zsh
Binaries:
  Node: 13.7.0 - /usr/local/bin/node
  npm: 6.14.1 - /usr/local/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Chrome: 80.0.3987.122
  Safari: 13.0.5

The text was updated successfully, but these errors were encountered:

github-actions · 2020-03-27T12:02:59Z

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

danedavid · 2020-03-27T14:10:32Z

Hey, I'd like to take a shot at this as my first contribution to the gatsby codebase. Been looking into how plugins work in the past days. Need to invest more time over the weekend. Meanwhile, any tips anyone?

leafac · 2020-03-27T17:50:35Z

@danedavid: Here’s what I’d start with:

Setup the local development environment.
Modify the sample website doesnt-work that I included in this issue to use the local Gatsby installation. (Use npm link.)
Check that the remark-math parser plugin is being picked up. I’d modify the line to read something like:

module.exports.setParserPlugins = () => { console.log("PLUGIN IS BEING PICKED UP"); return [remarkMath]; }

Check that the gatsby-remark-katex plugin itself is being picked up. I’d add a console.log() there as well.
Check that the visitors are finding the math nodes and producing appropriate results.

I’d expect the problem to become evident somewhere along this process.

Warning: Take what I’m saying with a grain of salt, as I’ve never contributed to the Gatsby codebase myself.

danedavid · 2020-04-03T05:18:20Z

I looked into this. It appears the plugin is picked up. It looks like the issue is with the generated markdownAST. When I console.log(markdownAST) inside the gatsby-remark-plugin, the AST does not contain any inlineMath node. But when I check in GraphiQL with query:

{
  allMdx {
    edges {
      node {
        mdxAST
      }
    }
  }
}

the result AST has an inlineMath node. The issue then could be parser not being picked up, but I did do step 3 of @leafac 's comment, and the log showed up.

I also put logs inside visit callback. The logs are not appearing when the pages are built, but logs show (including the correct generated HTML) when I run the query in GraphiQL.

leafac · 2020-04-03T15:49:22Z

Could it be that gatsby-plugin-mdx isn’t using the mdxAST field, but something like the body field?

…ixes gatsbyjs#21866.

danedavid · 2020-05-18T18:26:55Z

Finally got time, and fixed it. The issue was with mdx-loader used by webpack not picking up gatsby remark parsers. Thank you @leafac for your support!

danabrit · 2020-05-29T23:40:45Z

@leafac Can you please confirm whether this PR - #21861 - resolved your issue?

leafac · 2020-06-01T22:09:40Z

What’s the best way for me to check?

I tried to clone https://github.com/jlkiri/gatsby/, switch to the mdx-interop-default-exp branch, go to packages/gatsby-plugin-mdx/ directory, run npm install && npm link, go to my doesnt-work example, and run npm link gatsby-plugin-mdx. But that failed with something to the effect of Cannot find module 'webpack'. I think it has to do with missing peer dependencies. There must be a better way to do this…

ascorbic · 2020-06-04T10:06:53Z

@leafac The branch has been merged, so you should just need to check with the latest version of Gatsby. If you can do that, let us know if it fixes it for you.

leafac · 2020-06-04T20:15:04Z

I tried it with the latest versions and the problem remains. Here’s my package.json:

{
  "dependencies": {
    "@mdx-js/mdx": "^1.6.5",
    "@mdx-js/react": "^1.6.5",
    "gatsby": "^2.23.0",
    "gatsby-plugin-mdx": "^1.2.14",
    "gatsby-remark-katex": "^3.3.3",
    "gatsby-source-filesystem": "^2.3.10",
    "katex": "^0.11.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

To try it for yourself, just use this package.json on the original doesnt-work reproduction project I posted in my original message.

danedavid · 2020-06-05T03:55:21Z

The issue is with webpack mdx-loader not picking up remark parsers in gatsby-plugin-mdx. I have raised a PR #24194, but not sure if the approach is right. But in that branch the issue is fixed.

leafac · 2020-06-05T07:49:05Z

What’s a practical way for me to test that branch?

danedavid · 2020-06-05T13:35:49Z

@leafac No easy way. Clone, build gatsby-plugin-mdx and link the project that reproduces the error 🤷

leafac · 2020-06-12T08:51:38Z

I’m sorry but I don’t have the time to test this right now, so I’ll just take @danedavid’s word that the issue is fixed.

activatedgeek · 2020-06-16T23:00:33Z

Hmm, funny. I have had this issue before and was using the workaround for a while. Not sure what has changed since then but the usual instructions work for me now

In gatsby-config.js,

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-katex`,
            options: {
              strict: `ignore`,
            },
          },
       }
    }

and in gatsby-browser.js

import "katex/dist/katex.min.css"

For someone who wants to inspect further, the complete source is here.

ehowey · 2020-07-17T02:26:32Z

@danedavid I will just second what @leafac already said. Sounds like you are missing the CSS. There are instructions on the plugin page for Gatsby.

…ixes #21866. (#24194)

Stvad · 2021-03-20T00:34:28Z

Still facing this and had to use the remark/rehype plugins directly =\

nitzanvolman · 2021-03-24T19:01:25Z

What ended fixing the problem for me (march/2021 - "gatsby": "^3.1.0", "gatsby-plugin-mdx": "^2.1.0", ) was explicitly including an older version of "remark-math": "^3.0.1", instead of the latest version which is 4
version 4 relies on the newest version of remark with all of the newest bells and whistles, while gatsby-plugin-mdx still relies on remark v12.
I hope this helps someone.

tnorlund · 2021-03-25T18:47:29Z

What ended fixing the problem for me (march/2021 - "gatsby": "^3.1.0", "gatsby-plugin-mdx": "^2.1.0", ) was explicitly including an older version of "remark-math": "^3.0.1", instead of the latest version which is 4
version 4 relies on the newest version of remark with all of the newest bells and whistles, while gatsby-plugin-mdx still relies on remark v12.
I hope this helps someone.

What's your gatsby-config look like with these packages?

princefishthrower · 2021-03-26T10:32:03Z

@nitzanvolman @tnorlund - I'd also be interested in seeing that. Still struggling with MDX + Katex on Gatsby v3

nikoladev · 2021-03-26T10:57:23Z

@tnorlund @princefishthrower I had the same problem and here's the package versions I used and my gatsby-config.js. Hope it helps!

tnorlund · 2021-03-26T17:26:16Z

@tnorlund @princefishthrower I had the same problem and here's the package versions I used and my gatsby-config.js. Hope it helps!

Thanks for the help, but the Katex font doesn't match with the one I'm using in Latexit. Do you know how I can get this font?

nitzanvolman · 2021-03-26T21:36:31Z

@tnorlund @princefishthrower

What's your gatsby-config look like with these packages?

// gatsby-config.js
{
    resolve: 'gatsby-plugin-mdx',
    options: {
      extensions: ['.mdx', '.md'],
      remarkPlugins: [
        require('../../plugins/remark-element-directive'),
        // require('remark-images'),
        require('remark-math'),
        require('remark-emoji'),
      ],
      rehypePlugins: [
        require('rehype-katex'),
      ],
      gatsbyRemarkPlugins: [
        {
          resolve: 'gatsby-remark-autolink-headers',
          options: {
            // offsetY: '100',
            icon: false,
            // icon: '<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>',
            // maintainCase: true,
            // removeAccents: true,
            isIconAfterHeader: false,
            elements: ['h2'],
          },
        },
      ],
    },
  },

// package.json
...
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^3.1.0",
    "gatsby-plugin-mdx": "^2.1.0",
    "remark-html-katex": "^3.0.0",
   "remark-math": "^3.0.1",
...

tnorlund · 2021-03-26T21:44:03Z

@nitzanvolman

//gatsby-config.js
module.exports = {
...
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        remarkPlugins: [
...
          require( `remark-math` ),
          require( `remark-html-katex` ),
        ],
        extensions: [`.md`, `.mdx`],
      },
    },
...
  ]
}

// package.json
{
...
  "dependencies": {
...
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "gatsby": "^3.1.2",
    "gatsby-plugin-mdx": "^2.1.0",
    "remark-html-katex": "^3.0.0",
    "remark-math": "^3.0.1",
...
  },
...
}

tnorlund · 2021-03-27T07:48:57Z

I'm a node n00b, but I can't resolve the packages correctly using this configuration of remark-math and remark-html-katex. How do I still use my other packages like gatsby-remark-vscode?

//gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        remarkPlugins: [
          {
            resolve: `gatsby-remark-vscode`,
          },
          // `gatsby-remark-vscode`, <- This no longer works
          require( `remark-math` ),
          require( `remark-html-katex` ),
        ],
        extensions: [`.md`, `.mdx`],
      },
    },

ehowey · 2021-03-29T12:51:24Z

Has anyone had problems with gatsby-remark-katex not installing into your node_modules? It is the weirdest thing. It is in my package.json, in my yarn.lock, but nowhere to be found in the node_modules folder. I have never had that kind of thing happen before. Any ideas about that?

ascorbic · 2021-03-29T13:50:06Z

@ehowey Try running node -e "console.log(require.resolve('gatsby-remark-katex'))" in the root of the project

tnorlund · 2021-03-29T19:39:10Z

@tnorlund @princefishthrower I had the same problem and here's the package versions I used and my gatsby-config.js. Hope it helps!

Thanks for the help, but the Katex font doesn't match with the one I'm using in Latexit. Do you know how I can get this font?

\mathbf{} Produces the same thing in Latexit and Katex. What is Katex's default mode for inline formatting? How do I replicate it in normal Latexit?

tnorlund · 2021-03-29T19:47:02Z

Just figured out that the default is \text{}. Would still like to know how to continue to use my packages with require( 'remark-math' ) and require( 'remark-html-katex' ) in gatsby-config.js.

tnorlund · 2021-03-30T22:25:02Z

This is what I have so far. It works, but I cannot write 'complex' equations.

// gatsby-config.js
const remark_math = require( `remark-math` )
const remark_html_katex = require( `remark-html-katex` )

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-katex`,
            options: {
              strict: `ignore`,
            }
          },
        ],
        remarkPlugins: [ remark_math, remark_html_katex ],
        extensions: [`.md`, `.mdx`],
      },
    },

ben-dyer · 2021-05-30T07:13:19Z

@tnorlund thanks for sharing the config, it also works for me except my macros in the gatsby-remark-katex options stopped working.

jannikbuschke · 2021-09-26T08:42:41Z

It seems this is not properly documented yet and maybe the root issue is not yet resolved?

When digging through this thread I also faced issues with the recommend solutions, i.e. require('remark-math'), as require is not allowed.

And the different plugins (remark-math, remark-html-katex, gatsby-remark-katex, rehype-katex) also confuse me.

Am I assuming correct, that what is currently documented

// doesnt-work
$ npm install gatsby-transformer-remark gatsby-remark-katex katex

// gatsby-config.js
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    gatsbyRemarkPlugins: [`gatsby-remark-katex`]
  }
}

is the way it should work, but does not?

yuhsak · 2022-03-10T05:04:02Z

@jannikbuschke

It seems this is not properly documented yet and maybe the root issue is not yet resolved?

Unfortunately not yet. The root issue is that remark-math which is a core dependency of gatsby-remark-katex requires remark 13 to get working.

However then it seems to need updating @mdx-js/mdx to 2.0.0 first and it'd be a bit heavy work to get done.

is the way it should work, but does not?

I agree with you. It should work unless such incompatibility. But thus we need some workaround for right now.

Since it's not a specific issue only with gatsby-remark-katex but more about general version compatibility, it maybe more helpful if it was somehow documented.

Workaround

FYI, here is the workaround to enable KaTeX with gatsby-plugin-mdx.

There are two points.

use remark-math and rehype-katex insted of gatsby-remark-katex
explicitly specify compatible version of each

Version

gatsby@4.9.3 gatsby-plugin-mdx@3.9.1

Snippet

npm install remark-math@3.0.1 rehype-katex@5.0.0

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        remarkPlugins: [
          require('remark-math'),
        ],
        rehypePlugins: [
          [require('rehype-katex'), { strict: 'ignore' }],
        ],
      }
    }
  ]
}

gatsby-browser.js

import 'katex/dist/katex.min.css'

Note that katex module comes with rehype-katex therefor it doesn't have to be installed individually.

dinhanhthi · 2022-04-24T08:00:06Z

@jannikbuschke

It seems this is not properly documented yet and maybe the root issue is not yet resolved?

Unfortunately not yet. The root issue is that remark-math which is a core dependency of gatsby-remark-katex requires remark 13 to get working.

However then it seems to need updating @mdx-js/mdx to 2.0.0 first and it'd be a bit heavy work to get done.

is the way it should work, but does not?

I agree with you. It should work unless such incompatibility. But thus we need some workaround for right now.

Since it's not a specific issue only with gatsby-remark-katex but more about general version compatibility, it maybe more helpful if it was somehow documented.

Workaround

FYI, here is the workaround to enable KaTeX with gatsby-plugin-mdx.

There are two points.

use remark-math and rehype-katex insted of gatsby-remark-katex

explicitly specify compatible version of each

Version

gatsby@4.9.3 gatsby-plugin-mdx@3.9.1

Snippet
npm install remark-math@3.0.1 rehype-katex@5.0.0
gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        remarkPlugins: [
          require('remark-math'),
        ],
        rehypePlugins: [
          [require('rehype-katex'), { strict: 'ignore' }],
        ],
      }
    }
  ]
}
gatsby-browser.js
import 'katex/dist/katex.min.css'
Note that katex module comes with rehype-katex therefor it doesn't have to be installed individually.

I works (I'm using Gatsby 4.12.1 and gatsby-plugin-mdx 3.9.1)

ingyer-ks · 2023-01-21T05:10:44Z

Dear all,
I found inserting

import 'katex/dist/katex.min.css'

in gatsby-browser.js doesn't work.
Instead, I linked the css in gatsby-ssr.js like

  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
    crossorigin="anonymous"
  ></link>

and now it works.
My environment is Gatsby 3.13.0, gatsby-plugin-mdx 2.13.0.
Hope help somebody.

RobinL · 2023-09-15T12:25:07Z

For What It's Worth, this is the setup that worked for me:

Dependencies:

"gatsby": "^5.12.4",
"remark-math": "^5.1.1",
"rehype-katex": "^6.0.3",

Gatsby Configuration:

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    mdxOptions: {
      remarkPlugins: [remarkMath],
      rehypePlugins: [
        [rehypeKatex, { strict: 'ignore' }],
      ],
    },
  },
}

Example in .mdx:

import 'katex/dist/katex.min.css'

$$
x = \frac{{-b \pm \sqrt{{b^2 - 4ac}}}}{{2a}}
$$

The formula \( a + b = 2 \) tells us something important.

leafac added the type: bug An issue or pull request relating to a bug in Gatsby label Feb 29, 2020

TylerBarnes added help wanted Issue with a clear description that the community can help with. status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. labels Mar 7, 2020

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Mar 27, 2020

leafac added not stale and removed stale? Issue that may be closed soon due to the original author not responding any more. labels Mar 27, 2020

kylebarron mentioned this issue Apr 16, 2020

Fix to support normal math syntax kylebarron/kylebarron.github.io#7

Open

hennessyevan mentioned this issue Apr 16, 2020

Remark doesn't work with gatsby-plugin-mdx hennessyevan/gatsby-remark-grid-tables#1

Open

alaaalii mentioned this issue Apr 22, 2020

feat: add remarkPlugins theme option carbon-design-system/gatsby-theme-carbon#821

Merged

danedavid added a commit to danedavid/gatsby that referenced this issue May 18, 2020

Fix issue with gatsby-plugin-mdx not picking up gatsbyRemarkPlugins. F…

695fd4c

…ixes gatsbyjs#21866.

danedavid mentioned this issue May 18, 2020

Fix issue with gatsby-plugin-mdx not picking up gatsbyRemarkPlugins #24194

Merged

gpbl mentioned this issue May 18, 2020

[gatsby-plugin-mdx] Remark plugins are not required correctly #21821

Closed

danabrit added the topic: remark/mdx Related to Markdown, remark & MDX ecosystem label May 29, 2020

danabrit added the status: awaiting author response Additional information has been requested from the author label May 29, 2020

wardpeet added the topic: MDX label Jun 24, 2020

laurieontech closed this as completed in #24194 Jul 17, 2020

laurieontech pushed a commit that referenced this issue Jul 17, 2020

Fix issue with gatsby-plugin-mdx not picking up gatsbyRemarkPlugins. F…

431c9bb

…ixes #21866. (#24194)

This was referenced Aug 29, 2020

Update math-blocks.mdx with Gastby implementation. mdx-js/mdx#1241

Merged

Update README.md with mdx implementation. #26698

Closed

LekoArts removed the not stale label Sep 9, 2020

hikerpig mentioned this issue Jun 27, 2021

How to add gatsby-remark-katex? hikerpig/foam-template-gatsby-kb#7

Closed

jannikbuschke mentioned this issue Sep 26, 2021

Latex not rendering. jannikbuschke/gatsby-antd-docs#34

Open

raonsol mentioned this issue Aug 28, 2022

MDX와 KaTeX 충돌 raonsol/devlog-raonsol#1

Closed

ArnieHung mentioned this issue Dec 27, 2022

fails to render math equations in mdx ArnieHung/PQC-factbook#1

Open

[gatsby-remark-katex] Doesn’t work with gatsby-plugin-mdx #21866

[gatsby-remark-katex] Doesn’t work with gatsby-plugin-mdx #21866

Comments

leafac commented Feb 29, 2020

Description

Steps to reproduce

Expected result

Actual result

Environment

github-actions bot commented Mar 27, 2020

danedavid commented Mar 27, 2020

leafac commented Mar 27, 2020

danedavid commented Apr 3, 2020 • edited Loading

leafac commented Apr 3, 2020

danedavid commented May 18, 2020

danabrit commented May 29, 2020

leafac commented Jun 1, 2020 • edited Loading

ascorbic commented Jun 4, 2020

leafac commented Jun 4, 2020 • edited Loading

danedavid commented Jun 5, 2020

leafac commented Jun 5, 2020

danedavid commented Jun 5, 2020

leafac commented Jun 12, 2020 • edited Loading

activatedgeek commented Jun 16, 2020

ehowey commented Jul 17, 2020

Stvad commented Mar 20, 2021

nitzanvolman commented Mar 24, 2021

tnorlund commented Mar 25, 2021

princefishthrower commented Mar 26, 2021

nikoladev commented Mar 26, 2021

tnorlund commented Mar 26, 2021

nitzanvolman commented Mar 26, 2021

tnorlund commented Mar 26, 2021

tnorlund commented Mar 27, 2021

ehowey commented Mar 29, 2021

ascorbic commented Mar 29, 2021

tnorlund commented Mar 29, 2021

tnorlund commented Mar 29, 2021

tnorlund commented Mar 30, 2021

ben-dyer commented May 30, 2021

jannikbuschke commented Sep 26, 2021

yuhsak commented Mar 10, 2022 • edited Loading

Workaround

dinhanhthi commented Apr 24, 2022

Workaround

ingyer-ks commented Jan 21, 2023

RobinL commented Sep 15, 2023 • edited Loading

danedavid commented Apr 3, 2020 •

edited

Loading

leafac commented Jun 1, 2020 •

edited

Loading

leafac commented Jun 4, 2020 •

edited

Loading

leafac commented Jun 12, 2020 •

edited

Loading

yuhsak commented Mar 10, 2022 •

edited

Loading

RobinL commented Sep 15, 2023 •

edited

Loading