Latex not rendering.

[FishFucker69]

Latex is not rendering at http://localhost:8000/docs/template/get-started/latex

This is how it looks.

I think its a problem with gatsby v3 only.

[jannikbuschke]

this is probably related gatsbyjs/gatsby#21866

[jannikbuschke]

@AnshulKanwar I tried for some time to resolve this issue, but without luck.

Any help is appreciated. Trying different versions, libraries, configs.. Im just trying but have no real clue how the plugins relate to each other.

We currently use this plugin to render md/mdx files:

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve('./src/Layout.tsx'),
        },
        extensions: ['.mdx', '.md'],
        // workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
        plugins: [`gatsby-remark-autolink-headers`],
        gatsbyRemarkPlugins: [
          `gatsby-remark-katex`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1035,
            },
          },
          `gatsby-remark-autolink-headers`,
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: null,
              showLineNumbers: true,
              noInlineHighlight: false,
            },
          },
        ],
      },
    },

[vinhhungle]

I've got the same issue. Do you know why the demo works?

[jannikbuschke]

@vinhhungle I think the version on the demo is from some time ago: https://github.com/jannikbuschke/gatsby-antd-docs/tree/065003c03770785d38adf08939785b5ecff1fee1

packages that could be relevant:
demo (working):

"katex": "0.11.0",
"prismjs": "1.17.1",
"gatsby-remark-katex": "3.1.7",
"gatsby-remark-prismjs": "3.3.12",
"@mdx-js/mdx": "1.4.4",

current (not working)

 "katex": "0.13.18",
 "prismjs": "1.25.0",
 "gatsby-remark-katex": "^6.0.0",
 "gatsby-remark-prismjs": "^6.0.0",
 "@mdx-js/mdx": "1.6.22",

gatsby-config.js that could be relevant
demo (working):

   {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve('./src/Layout.tsx'),
        },
        extensions: ['.mdx', '.md'],
        // workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
        plugins: [`gatsby-remark-autolink-headers`],
        gatsbyRemarkPlugins: [
          `gatsby-remark-katex`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1035,
            },
          },
          `gatsby-remark-autolink-headers`,
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: null,
              showLineNumbers: true,
              noInlineHighlight: false,
            },
          },
        ],
      },
    }

current (not working):

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve('./src/Layout.tsx'),
        },
        extensions: ['.mdx', '.md'],
        // workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
        plugins: [`gatsby-remark-autolink-headers`],
        gatsbyRemarkPlugins: [
          `gatsby-remark-katex`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1035,
            },
          },
          `gatsby-remark-autolink-headers`,
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: null,
              showLineNumbers: true,
              noInlineHighlight: false,
            },
          },
        ],
      },
    },

[jannikbuschke]

If anyone can play/check with different versions, that would be appreciated 🙏

[vinhhungle]

Update package.json with the following versions works for me

"@mdx-js/mdx": "1.6.21",
"gatsby-remark-katex": "4.2.0",