Fix math rendering

Switches from gatsby-remark-katex to remark-math + rehype-katex

See gatsbyjs/gatsby#28031 (comment)

gatsby-config.js

@@ -52,7 +52,11 @@ module.exports = {
         defaultLayouts: {
           default: `${__dirname}/src/components/layout/layout.jsx`,
         },
-        remarkPlugins: [require('remark-unwrap-images')],
+        remarkPlugins: [
+          require('remark-unwrap-images'),
+          require('remark-math'),
+        ],
+        rehypePlugins: [[require('rehype-katex'), { strict: false }]],
         gatsbyRemarkPlugins: [
           {
             resolve: path.join(
@@ -80,12 +84,6 @@ module.exports = {
               removeAccents: true,
             },
           },
-          {
-            resolve: 'gatsby-remark-katex',
-            options: {
-              strict: 'ignore',
-            },
-          },
         ],
       },
     },

package.json

@@ -31,7 +31,6 @@
     "gatsby-remark-autolink-headers": "^4.8.0",
     "gatsby-remark-copy-linked-files": "^4.8.0",
     "gatsby-remark-images": "^5.8.0",
-    "gatsby-remark-katex": "^5.8.0",
     "gatsby-source-filesystem": "^3.11.0",
     "gatsby-transformer-sharp": "^3.11.0",
     "gh-pages": "^2.1.1",
@@ -46,6 +45,8 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-transition-group": "^4.4.2",
+    "rehype-katex": "^5.0.0",
+    "remark-math": "^3.0.1",
     "remark-unwrap-images": "^2.1.0",
     "rimraf": "^3.0.2",
     "stylelint": "^13.6.1",

src/components/markdown/markdown.module.css

@@ -307,8 +307,8 @@
   /* ============================
    * Math
    * ============================ */
-  :global(.katex-display) {
-    @apply mb-0;
+  :global(.math .katex-display) {
+    @apply m-0;
   }
 
   /* ============================