Add support for LaTeX using KaTeX

gatsby-config.js

@@ -31,7 +31,15 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: [`gatsby-remark-auto-headers`],
+        plugins: [
+          `gatsby-remark-auto-headers`,
+          {
+            resolve: `gatsby-remark-katex`,
+            options: {
+              strict: `ignore`,
+            },
+          },
+        ],
       },
     },
     {

package-lock.json

@@ -9003,9 +9003,9 @@
       }
     },
     "gatsby-core-utils": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.0.10.tgz",
-      "integrity": "sha512-AeOrwjF4LiAHAqvrUkAFtvZHkLpKtF2gnIS/nezHDzIMq0SaZLHbdQiJcesyzZ6CcerjLIDWbD6MqxrTt6KkhA=="
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.0.12.tgz",
+      "integrity": "sha512-Ryh0ILzG6zuYA88irnFQPKGe0NwEBh30FqAp7KNyYgsiOB41CSD0JfjIlFUgkU/gAoLlZKXyeFwbq3SVEBwNoA=="
     },
     "gatsby-graphiql-explorer": {
       "version": "0.2.18",
@@ -9820,6 +9820,26 @@
         "unist-util-visit": "^1.4.0"
       }
     },
+    "gatsby-remark-katex": {
+      "version": "3.1.12",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-katex/-/gatsby-remark-katex-3.1.12.tgz",
+      "integrity": "sha512-hxxBGkahZ5oENWe0yLmL2Iie2wG1X296HG+L8lvMtvIa29EmO7op6lxe/4OUPFeBCtOs+TpKSwF54C9UFy/W3g==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "remark-math": "^1.0.6",
+        "unist-util-visit": "^1.4.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.6.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.2.tgz",
+          "integrity": "sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "gatsby-source-filesystem": {
       "version": "2.1.26",
       "resolved": "https://registry.npmjs.org/gatsby-source-filesystem/-/gatsby-source-filesystem-2.1.26.tgz",
@@ -10109,13 +10129,13 @@
       }
     },
     "gatsby-transformer-remark": {
-      "version": "2.6.24",
-      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.6.24.tgz",
-      "integrity": "sha512-UeUGZzCL8/I8O0nAW/j0FwJvNDy0mQ3+EoVe3gX5C5wOB0Sjq4RLPs1316OfEom4dNntPATIRpw0ngr00dNaNg==",
+      "version": "2.6.26",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.6.26.tgz",
+      "integrity": "sha512-AEVP+j6oMncW7O1RYAHsmMc1WUlm/bftrtKS66ZKGVHODJQ33qLN8orC3cs/FY90Za7nDt8OnnGhB6MgNuIidg==",
       "requires": {
-        "@babel/runtime": "^7.6.0",
+        "@babel/runtime": "^7.6.2",
         "bluebird": "^3.5.5",
-        "gatsby-core-utils": "^1.0.10",
+        "gatsby-core-utils": "^1.0.12",
         "gray-matter": "^4.0.2",
         "hast-util-raw": "^4.0.0",
         "hast-util-to-html": "^4.0.1",
@@ -12349,6 +12369,14 @@
         "object.assign": "^4.1.0"
       }
     },
+    "katex": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.11.1.tgz",
+      "integrity": "sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==",
+      "requires": {
+        "commander": "^2.19.0"
+      }
+    },
     "keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -16391,6 +16419,14 @@
         }
       }
     },
+    "remark-math": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-1.0.6.tgz",
+      "integrity": "sha512-I43wU/QOQpXvVFXKjA4FHp5xptK65+5F6yolm8+69/JV0EqSOB64wURUZ3JK50JtnTL8FvwLiH2PZ+fvsBxviA==",
+      "requires": {
+        "trim-trailing-lines": "^1.1.0"
+      }
+    },
     "remark-parse": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-6.0.3.tgz",

package.json

@@ -42,9 +42,11 @@
     "gatsby-plugin-styled-components": "^3.1.6",
     "gatsby-plugin-typescript": "^2.1.9",
     "gatsby-remark-auto-headers": "^1.0.3",
+    "gatsby-remark-katex": "^3.1.12",
     "gatsby-source-filesystem": "^2.1.26",
-    "gatsby-transformer-remark": "^2.6.24",
+    "gatsby-transformer-remark": "^2.6.26",
     "gatsby-transformer-sharp": "^2.2.16",
+    "katex": "^0.11.1",
     "polished": "^3.4.1",
     "prismjs": "^1.17.1",
     "ramda": "^0.26.1",

src/templates/languagePost.tsx

@@ -4,6 +4,8 @@ import { Markdown } from "../components/Markdown"
 import { ResourceHeader } from "../components/ResourceHeader"
 import { SEO } from "../components/SEO"
 
+import "katex/dist/katex.min.css"
+
 // @todo maybe find alternative type for data
 const LanguagePost: FC<any> = ({ data }) => {
   const { relativePath } = data.file