Math in dcc.Markdown using KaTeX

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

@@ -46,10 +46,12 @@
     "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-resize-detector": "^4.2.1",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "remark-math": "^1.0.6",
     "uniqid": "^5.0.3"
   },
   "devDependencies": {
@@ -87,6 +89,7 @@
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "terser-webpack-plugin": "^2.3.0",
+    "url-loader": "^2.1.0",    
     "webpack": "^4.37.0",
     "webpack-cli": "^3.3.6",
     "webpack-serve": "^2.0.3"

src/fragments/Markdown.react.js

@@ -3,6 +3,10 @@ import {mergeDeepRight, pick, type} from 'ramda';
 import JsxParser from 'react-jsx-parser';
 import Markdown from 'react-markdown';
 
+import RemarkMathPlugin from 'remark-math';
+import { InlineMath, BlockMath } from 'react-katex';
+import 'katex/dist/katex.min.css';
+
 import MarkdownHighlighter from '../utils/MarkdownHighlighter';
 import {propTypes, defaultProps} from '../components/Markdown.react';
 
@@ -131,7 +135,10 @@ export default class DashMarkdown extends Component {
                 <Markdown
                     source={displayText}
                     escapeHtml={!dangerously_allow_html}
+                    plugins={[RemarkMathPlugin]}
                     renderers={{
+                        math: ({value}) => <BlockMath>{value}</BlockMath>,
+                        inlineMath: ({value}) => <InlineMath>{value}</InlineMath>,
                         html: props =>
                             props.escapeHtml ? (
                                 props.value

webpack.config.js

@@ -92,6 +92,14 @@ module.exports = (env, argv) => {
                         },
                     ],
                 },
+                {
+                    test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                    use:[
+                        {
+                            loader: 'url-loader'
+                        }
+                    ]
+                }
             ],
         },
         resolve: {
@@ -138,4 +146,4 @@ module.exports = (env, argv) => {
             })
         ]
     }
-};
+};