Math in dcc.Markdown

Author: Anders Fredrik Kiær

demo/Demo.react.js

@@ -58,6 +58,17 @@ Some code
 \\\`\\\`\\\`
 
 Inline \\\`code\\\` example.
+
+***
+
+Some block mathematics:
+
+$$
+e^{ix} = \\\\cos x + i\\\\sin x.
+$$
+
+Some inline mathematics $\\\\alpha=2$ and $\\\\beta=3$.
+
 \`
 
 ReactDOM.render(<Markdown>{markdown}</Markdown>, mountNode);

package.json

@@ -40,9 +40,11 @@
     "react-dates": "^20.1.0",
     "react-docgen": "^3.0.0",
     "react-dropzone": "^4.1.2",
+    "react-katex": "^2.0.2",
     "react-markdown": "^4.0.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "remark-math": "^1.0.6",
     "uniqid": "^5.0.3",
     "fast-isnumeric": "^1.1.3"
   },
@@ -73,6 +75,7 @@
     "react-dom": "^16.8.6",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
+    "url-loader": "^2.1.0",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-serve": "^2.0.3"

src/components/Markdown.react.js

@@ -2,6 +2,9 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {type} from 'ramda';
 import Markdown from 'react-markdown';
+import RemarkMathPlugin from 'remark-math';
+import { InlineMath, BlockMath } from 'react-katex';
+import 'katex/dist/katex.min.css';
 import './css/highlight.css';
 
 // eslint-disable-next-line valid-jsdoc
@@ -115,6 +118,11 @@ class DashMarkdown extends Component {
                 <Markdown
                     source={displayText}
                     escapeHtml={!dangerously_allow_html}
+                    plugins={[RemarkMathPlugin]}
+                    renderers={{
+                        math: ({value}) => <BlockMath>{value}</BlockMath>,
+                        inlineMath: ({value}) => <InlineMath>{value}</InlineMath>
+                    }}
                 />
             </div>
         );

webpack.config.js

@@ -75,7 +75,15 @@ module.exports = (env, argv) => {
                         },
                     ],
                 },
+                {
+                    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                    use:[
+                        {
+                            loader: 'url-loader'
+                        }
+                    ]
+                }
             ],
         }
     }
-};
+};