mathjax in markdown

Author: archmoj

components/dash-core-components/package-lock.json

@@ -61,6 +61,7 @@
     "react-resize-detector": "^6.7.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "remark-math": "^3.0.1",
     "uniqid": "^5.4.0"
   },
   "devDependencies": {

components/dash-core-components/package.json

@@ -1,8 +1,8 @@
+import {asyncDecorator} from '@plotly/dash-component-plugins';
 import PropTypes from 'prop-types';
-import React, {Component, lazy, Suspense} from 'react';
+import React, {Component, Suspense} from 'react';
 import markdown from '../utils/LazyLoader/markdown';
-
-const RealDashMarkdown = lazy(markdown);
+import mathjax from '../utils/LazyLoader/mathjax';
 
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -11,6 +11,14 @@ const RealDashMarkdown = lazy(markdown);
  * [react-markdown](https://rexxars.github.io/react-markdown/) under the hood.
  */
 export default class DashMarkdown extends Component {
+    constructor(props) {
+        super(props);
+
+        if (props.mathjax) {
+            DashMarkdown._loadMathjax = true;
+        }
+    }
+
     render() {
         return (
             <Suspense fallback={null}>
@@ -32,6 +40,11 @@ DashMarkdown.propTypes = {
      */
     className: PropTypes.string,
 
+    /**
+     * If true, loads mathjax v3 (tex-svg) into the page and use it in the markdown
+     */
+    mathjax: PropTypes.bool,
+
     /**
      * A boolean to control raw HTML escaping.
      * Setting HTML from code is risky because it's easy to
@@ -91,10 +104,18 @@ DashMarkdown.propTypes = {
 };
 
 DashMarkdown.defaultProps = {
+    mathjax: false,
     dangerously_allow_html: false,
     highlight_config: {},
     dedent: true,
 };
 
+const RealDashMarkdown = asyncDecorator(DashMarkdown, () =>
+    Promise.all([
+        markdown(),
+        DashMarkdown._loadMathjax ? mathjax() : undefined,
+    ]).then(([md]) => md)
+);
+
 export const propTypes = DashMarkdown.propTypes;
 export const defaultProps = DashMarkdown.defaultProps;

components/dash-core-components/src/components/Markdown.react.js

@@ -2,7 +2,9 @@ import React, {Component} from 'react';
 import {mergeDeepRight, pick, type} from 'ramda';
 import JsxParser from 'react-jsx-parser';
 import Markdown from 'react-markdown';
+import RemarkMath from 'remark-math';
 
+import Math from './Math.react';
 import MarkdownHighlighter from '../utils/MarkdownHighlighter';
 import {propTypes, defaultProps} from '../components/Markdown.react';
 
@@ -85,6 +87,7 @@ export default class DashMarkdown extends Component {
             highlight_config,
             loading_state,
             dangerously_allow_html,
+            mathjax,
             children,
             dedent,
         } = this.props;
@@ -131,7 +134,16 @@ export default class DashMarkdown extends Component {
                 <Markdown
                     source={displayText}
                     escapeHtml={!dangerously_allow_html}
+                    plugins={mathjax ? [RemarkMath] : []}
                     renderers={{
+                        math: props => (
+                            <Math tex={props.value} inline={false} />
+                        ),
+
+                        inlineMath: props => (
+                            <Math tex={props.value} inline={true} />
+                        ),
+
                         html: props =>
                             props.escapeHtml ? (
                                 props.value

components/dash-core-components/src/fragments/Markdown.react.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+
+export default class DashMath extends Component {
+    constructor(props) {
+        super(props);
+        this.span_element = React.createRef();
+    }
+
+    componentDidMount() {
+        this.renderMath();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (
+            prevProps.tex !== this.props.tex ||
+            prevProps.inline !== this.props.inline
+        ) {
+            this.renderMath();
+        }
+    }
+
+    renderMath() {
+        if (window.MathJax && window.MathJax.typeset) {
+            window.MathJax.typeset([this.span_element.current]);
+        }
+    }
+
+    render() {
+        return (
+            <span ref={this.span_element}>
+                {this.props.inline ? String.raw`\(` : String.raw`\[`}
+                {this.props.tex}
+                {this.props.inline ? String.raw`\)` : String.raw`\]`}
+            </span>
+        );
+    }
+}
+
+DashMath.propTypes = {
+    tex: PropTypes.string,
+    inline: PropTypes.bool,
+};
+
+DashMath.defaultProps = {
+    tex: '',
+    inline: true,
+};
+
+export const propTypes = DashMath.propTypes;
+export const defaultProps = DashMath.defaultProps;

components/dash-core-components/src/fragments/Math.react.js

@@ -65,7 +65,7 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.jsx?$/,
-                    include: /node_modules[\\\/](react-jsx-parser|highlight[.]js|react-markdown|is-plain-obj|color)[\\\/]/,
+                    include: /node_modules[\\\/](react-jsx-parser|highlight[.]js|react-markdown|remark-math|is-plain-obj|color)[\\\/]/,
                     use: {
                         loader: 'babel-loader',
                         options: {