feat: support katex

content/posts/HelloWorld.md

@@ -11,6 +11,16 @@ topImageAlt: "Hello World"
 
 # "Hello, World!" program
 
+
+$$
+\begin{aligned}
+\dot{x} & = \sigma(y-x) \\
+\dot{y} & = \rho x - y - xz \\
+\dot{z} & = -\beta z + xy
+\end{aligned}
+$$
+
+
 > from [wikipedia](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program)
 
 "Hello World" redirects here. For other uses, see Hello World (disambiguation).

gatsby-browser.js

@@ -4,6 +4,8 @@ import "./src/styles/index.scss";
 import "./src/styles/base.scss";
 import store, { Actions } from "./src/state";
 
+import "katex/dist/katex.min.css";
+
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 dayjs.extend(duration);

gatsby-config.ts

@@ -181,6 +181,13 @@ export default {
               escapeEntities: {},
             },
           },
+          {
+            resolve: `gatsby-remark-katex`,
+            options: {
+              // Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
+              strict: `ignore`
+            }
+          }
         ],
       },
     },

package.json

@@ -18,13 +18,14 @@
     "gatsby-plugin-sass": "^4.2.0",
     "gatsby-plugin-sharp": "^3.10.2",
     "gatsby-remark-images": "^5.7.0",
+    "gatsby-remark-katex": "^5.7.0",
     "gatsby-remark-prismjs": "^5.7.0",
     "gatsby-source-filesystem": "^3.9.0",
-    "gatsby-transformer-remark": "^4.6.0",
+    "gatsby-transformer-remark": "^4.7.0",
     "gatsby-transformer-sharp": "^3.10.0",
     "highlight.js": "^10.7.2",
     "jsdom": "^16.5.2",
-    "katex": "^0.13.0",
+    "katex": "^0.13.13",
     "marked": "^2.0.1",
     "prettier": "^2.2.1",
     "prismjs": "^1.24.1",

src/styles/markdown.scss

@@ -208,8 +208,7 @@ $base-text-size: 16px;
     }
   }
 
-  // TODO: for LaTex
-  span.latex {
+  span.katex {
     font-size: $base-text-size * 1.5;
     display: block;
     text-align: center;