localized katex rendering operational

Author: rvente

content/posts/2020-06-09--Math/index.mdx

@@ -0,0 +1,12 @@
+---
+title: "Something is Coming"
+date: 2020-06-09
+tags:
+  - Demo
+  - AI
+---
+
+import ExamplePage, {MyFunction3}from "./void"
+
+One of my favorite formulas is <MyFunction3 />. It's not gamourous. It's
+not exceptional. But it's beautiful. There's beauty in this simplicity. Something else beautiful is coming. You'll see.

content/posts/2020-06-09--Math/void.js

@@ -0,0 +1,63 @@
+import React from 'react'; 
+
+import 'katex/dist/katex.min.css';
+import { BlockMath, InlineMath } from 'react-katex';
+
+export const MyFunction3 = () => (
+      <InlineMath>
+        {'a^2 + b^2 = c^2'}
+      </InlineMath>
+)
+
+const ExamplePage = () => (
+  <div
+    style={{
+      // width: '40%',
+      margin: '0 auto'
+    }}
+  >
+    <h1>
+      <InlineMath>
+        {'\\text{React-}\\KaTeX \\space \\text{usage examples}'}
+      </InlineMath>
+    </h1>
+    <h2>
+      <code>{'<InlineMath />'}</code>
+    </h2>
+    This is an in-line expression <InlineMath math={'\\int_0^\\infty x^2 dx'} />{' '}
+    passed as <code>math prop</code>. This is an in-line{' '}
+    <InlineMath math={'\\int_0^\\infty x^2 dx'} /> expression passed as{' '}
+    <code>children prop</code>.
+    <h2>
+      <code>{'<BlockMath />'}</code>
+    </h2>
+    <BlockMath math={'\\int_0^\\infty x^2 dx'} />
+    <BlockMath>{`A =
+        \\begin{pmatrix}
+        1 & 0 & 0 \\\\
+        0 & 1 & 0 \\\\
+        0 & 0 & 1 \\\\
+        \\end{pmatrix}`}</BlockMath>
+    <h2>Error handling</h2>
+    <BlockMath math={'\\int_0^\\infty x^2 dx \\inta'} errorColor={'#cc0000'} />
+    <BlockMath
+      math="\\int_{"
+      renderError={err => <b>Custom error message: {err.name}</b>}
+    />
+    <BlockMath math="\sum_{" />
+    <BlockMath
+      math={'\\sum_{'}
+      renderError={err => <b>Custom error message: {err.name}</b>}
+    />
+    <BlockMath math={123} />
+    <BlockMath
+      math={123}
+      renderError={err => <b>Custom error message: {err.name}</b>}
+    />
+  </div>
+);
+
+// ReactDOM.render(<ExamplePage />, document.getElementById('root'));
+// https://github.com/iksena/math-quiz/blob/master/src/Containers/
+
+export default ExamplePage

examples/2020-06-09--Math/index.mdx

@@ -1,6 +1,3 @@
-require(`dotenv`).config({
-  path: `.env`,
-})
 
 module.exports = {
   pathPrefix: "",
@@ -84,20 +81,20 @@ module.exports = {
         ],
       },
     },
-    {
-      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`
-            }
+     {
+    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`
           }
-        ],
-      },
+        }
+      ],
     },
+  },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
   ],

examples/2020-06-09--Math/void.js

@@ -26,13 +26,14 @@
     "gatsby-plugin-netlify": "^2.1.3",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-sitemap": "^2.2.19",
-    "gatsby-remark-katex": "^3.3.4",
-    "gatsby-transformer-remark": "^2.8.15",
+    "gatsby-remark-katex": "^3.3.6",
+    "gatsby-transformer-remark": "^2.8.19",
     "gh-pages": "^3.0.0",
     "katex": "^0.11.1",
     "p5": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-katex": "^2.0.2",
     "react-p5": "^1.3.2",
     "react-p5-wrapper": "^2.0.0"
   },

gatsby-config.js

@@ -8,7 +8,8 @@ import Header from "./header"
 import Footer from "./footer"
 import CodeStyles from "../styles/code"
 import SkipNavLink from "./skip-nav"
-import "katex/dist/katex.min.css"
+// import "katex/dist/katex.min.css"
+// require(`katex/dist/katex.min.css`)
 
 type LayoutProps = { children: React.ReactNode; className?: string }