Merge pull request #253 from imteekay/katex-math

Katex & Mathematics

Base/components/MDX/MDX.tsx

@@ -1,5 +1,6 @@
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
+import { InlineMath, BlockMath } from 'react-katex';
 import TweetEmbed from 'react-tweet-embed';
 import rehypeHighlight from 'rehype-highlight';
 
@@ -28,6 +29,8 @@ const components = {
   TweetEmbed,
   SmoothRender,
   SideBySideVideos,
+  InlineMath,
+  BlockMath,
 };
 
 export const MDX = ({ content }: MDXPropTypes) => (

package.json

@@ -37,6 +37,7 @@
     "react-autocomplete": "^1.8.1",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.33.1",
+    "react-katex": "^3.0.1",
     "reactflow": "^11.7.4",
     "reading-time": "^1.5.0",
     "sharp": "^0.30.5"
@@ -48,6 +49,7 @@
     "@types/node": "18.16.0",
     "@types/react": "17.0.39",
     "@types/react-autocomplete": "^1.8.6",
+    "@types/react-katex": "^3.0.4",
     "cypress": "^9.2.0",
     "cypress-wait-until": "1.7.2",
     "eslint": "8.6.0",

pages/_app.tsx

@@ -8,6 +8,7 @@ import '../styles/night-owl.min.css';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import { AnimatePresence } from 'framer-motion';
+import 'katex/dist/katex.min.css';
 
 import { Layout } from 'Base/components/Layout';
 import { SearchBar } from 'Base/components/SearchBar';

yarn.lock

@@ -1204,6 +1204,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-katex@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-katex/-/react-katex-3.0.4.tgz#2b60eebf76938bb385337fd850d99cc53ad6ef67"
+  integrity sha512-aLkykKzSKLpXI6REJ3uClao6P47HAFfR1gcHOZwDeTuALsyjgMhz+oynLV4gX0kiJVnvHrBKF/TLXqyNTpHDUg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.5":
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
@@ -1780,6 +1787,11 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
+commander@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 commander@^9.3.0:
   version "9.4.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.1.tgz#d1dd8f2ce6faf93147295c0df13c7c21141cfbdd"
@@ -3318,6 +3330,13 @@ jsprim@^2.0.2:
     array-includes "^3.1.5"
     object.assign "^4.1.3"
 
+katex@^0.16.0:
+  version "0.16.11"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.11.tgz#4bc84d5584f996abece5f01c6ad11304276a33f5"
+  integrity sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==
+  dependencies:
+    commander "^8.3.0"
+
 kbar@^0.1.0-beta.23:
   version "0.1.0-beta.38"
   resolved "https://registry.yarnpkg.com/kbar/-/kbar-0.1.0-beta.38.tgz#946cc38781cc2e7ddbb7ad6f021d24ae9ef070a2"
@@ -4416,6 +4435,13 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-katex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-katex/-/react-katex-3.0.1.tgz#262b44f49c5fa727f1d13cbab595f791318e5083"
+  integrity sha512-wIUW1fU5dHlkKvq4POfDkHruQsYp3fM8xNb/jnc8dnQ+nNCnaj0sx5pw7E6UyuEdLRyFKK0HZjmXBo+AtXXy0A==
+  dependencies:
+    katex "^0.16.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"