[Minimal Blog]: Math equations doesn't render properly

[khalidsaifullaah]

Description

The mathematical notations that I've written using markdown conventions don't render in the proper way. I've been searching through a lot about the issue, the solutions I've found don't seem to be working, I'm really confused how may I properly render it the way it shows in markdown previews.

Some equations that are present in my .mdx file -

\hat{y} = \sigma(W_of(W_hx+b)+b)
\sigma(W_oa + b) = \hat{y}

Added a new term in gatsby.config.js (after searching around a bit on the issue)

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-katex`,
            options: {
              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
              strict: `ignore`
            }
          }
        ],
      },
    }

Also, I've installed katex package as well

Screenshot of the page

Environment

  System:
    OS: Windows 10 10.0.19042
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.0
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.53), ChromiumDev (89.0.774.4)
  npmPackages:
    gatsby: ^2.25.3 => 2.31.1
    gatsby-plugin-google-analytics: ^2.4.1 => 2.10.0
    gatsby-plugin-manifest: ^2.5.2 => 2.11.0
    gatsby-plugin-mdx: ^1.9.0 => 1.9.0
    gatsby-plugin-netlify: ^2.4.0 => 2.10.0
    gatsby-plugin-offline: ^3.3.3 => 3.9.0
    gatsby-plugin-sitemap: ^2.5.1 => 2.11.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.13 => 1.1.20
    gatsby-remark-katex: ^3.9.0 => 3.9.0
    gatsby-remark-mathjax: ^1.0.0 => 1.0.0
    gatsby-transformer-remark: ^2.15.0 => 2.15.0
  npmGlobalPackages:
    gatsby-cli: 2.18.0

[LekoArts]

Thank you for opening this!

Please see this other issue for how to add new remark plugins to the existing theme:
#567 (comment)

There also might be issues with MDX + Katex itself, but please see upstream issue like gatsbyjs/gatsby#28031 for this.

Thanks!

[khalidsaifullaah]

Thanks @LekoArts, I was certainly able to fix the issue with your help.
I had another question about adding CSS to the site, I guess I'll have to open a new issue for that.

[LekoArts]

@khalidsaifullaah There are multiple ways for adding CSS, this one here is probably the most straight-forward one: https://www.gatsbyjs.com/docs/how-to/styling/global-css/#adding-global-styles-without-a-layout-component

[khalidsaifullaah]

Thanks a lot @LekoArts, I was able to add the CSS. However, now I'm facing two new issues, I was wondering if you can help me resolve them.

1. There are two .gif images in my post, which are breaking the responsiveness of my site, they don't seem to get resized when opened on a mobile device.

PC view

Mobile view

As you can see, in mobile view the two .gif images are still the same size, which breaks the responsiveness of the page. Is there a way I could solve it?

2. This one is more of a question, Is there a way to make the "dark theme" the default one of my blog? I mean when a new user comes to the site, they see the "light theme" then they can switch to dark but is there a way so that I could make the "dark theme" default, so new users see that one at first?

Thanks

[khalidsaifullaah]

Thanks a lot @LekoArts, I was able to add the CSS. However, now I'm facing two new issues, I was wondering if you can help me resolve them.

1. There are two .gif images in my post, which are breaking the responsiveness of my site, they don't seem to get resized when opened on a mobile device.

PC view

Mobile view

As you can see, in mobile view the two .gif images are still the same size, which breaks the responsiveness of the page. Is there a way I could solve it?

1. This one is more of a question, Is there a way to make the "dark theme" the default one of my blog? I mean when a new user comes to the site, they see the "light theme" then they can switch to dark but is there a way so that I could make the "dark theme" default, so new users see that one at first?

Thanks

I was able to solve the 2nd issue, it's the .gifs that are giving me the trouble now...😓

[khalidsaifullaah]

I was able to solve the .gif responsiveness issue as well by simply using Bootstrap! then I answered my own question on Stack Overflow😄- https://stackoverflow.com/a/66211378/7610724

Thanks