docs: add remark math example

Author: ChristianMurphy

package-lock.json

@@ -49,11 +49,14 @@
     "babel-loader": "^8.1.0",
     "husky": "^4.2.5",
     "jest-environment-jsdom-sixteen": "^1.0.3",
+    "katex": "^0.11.1",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
+    "rehype-katex": "^3.0.0",
+    "remark-math": "^2.0.1",
     "ts-loader": "^7.0.4",
     "tsdx": "^0.13.2",
     "tslib": "^2.0.0",

package.json

@@ -1,22 +1,40 @@
 import React from 'react';
 import { text } from '@storybook/addon-knobs';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
+
 import { Remark } from '../src';
 
 export default {
   title: 'Remark Component',
   component: Remark,
 };
 
-export const Default = () =>
-  // prettier-ignore
+export const Default = () => (
   <Remark>
-    {text("content", `# header
+    {text(
+      'content',
+      `# header
 
 1. ordered
 2. list
 
 * unordered
-* list
+* list`
+    )}
+  </Remark>
+);
+
+export const Math = () => (
+  <Remark remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
+    {text(
+      'content',
+      `Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
 
-`)}
-  </Remark>;
+$$
+L = \\frac{1}{2} \\rho v^2 S C_L
+$$`
+    )}
+  </Remark>
+);

stories/remark-component.stories.tsx

@@ -1,12 +1,14 @@
-
-
 import { useEffect } from 'react';
 import { text } from '@storybook/addon-knobs';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
+
 import { useRemark } from '../src';
 
 export default {
   title: 'Remark Hook',
-  component: useRemark
+  component: useRemark,
 };
 
 export const Default = () => {
@@ -18,4 +20,25 @@ export const Default = () => {
   }, [markdownSource]);
 
   return reactContent;
-};
+};
+
+export const Math = () => {
+  const [reactContent, setMarkdownSource] = useRemark({
+    remarkPlugins: [remarkMath],
+    rehypePlugins: [rehypeKatex],
+  });
+  const markdownSource = text(
+    'markdown',
+    `Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
+
+  $$
+  L = \\frac{1}{2} \\rho v^2 S C_L
+  $$`
+  );
+
+  useEffect(() => {
+    setMarkdownSource(markdownSource);
+  }, [markdownSource]);
+
+  return reactContent;
+};