From 1b4db29dc7a05bdaa8e63e0edd2fc8898176e6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?= Date: Mon, 2 Sep 2019 14:39:54 +0200 Subject: [PATCH 1/3] Math in dcc.Markdown using KaTeX --- demo/Demo.react.js | 11 +++++++++++ package.json | 3 +++ src/fragments/Markdown.react.js | 7 +++++++ webpack.config.js | 10 +++++++++- 4 files changed, 30 insertions(+), 1 deletion(-) diff --git a/demo/Demo.react.js b/demo/Demo.react.js index 391657072..05157f85e 100644 --- a/demo/Demo.react.js +++ b/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}, mountNode); diff --git a/package.json b/package.json index 8c264ce98..d9022fe4d 100644 --- a/package.json +++ b/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" diff --git a/src/fragments/Markdown.react.js b/src/fragments/Markdown.react.js index 84854e7a7..da1506b15 100644 --- a/src/fragments/Markdown.react.js +++ b/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 { {value}, + inlineMath: ({value}) => {value}, html: props => props.escapeHtml ? ( props.value diff --git a/webpack.config.js b/webpack.config.js index ee1765a71..a3fa468f9 100644 --- a/webpack.config.js +++ b/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) => { }) ] } -}; \ No newline at end of file +}; From 2907e58842673fc297af953ea0a1cc7ff4498bfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?= Date: Mon, 9 Mar 2020 11:55:43 +0000 Subject: [PATCH 2/3] Revert "Math in dcc.Markdown using KaTeX" This reverts commit 1b4db29dc7a05bdaa8e63e0edd2fc8898176e6ab. --- demo/Demo.react.js | 11 ----------- package.json | 3 --- src/fragments/Markdown.react.js | 7 ------- webpack.config.js | 10 +--------- 4 files changed, 1 insertion(+), 30 deletions(-) diff --git a/demo/Demo.react.js b/demo/Demo.react.js index 05157f85e..391657072 100644 --- a/demo/Demo.react.js +++ b/demo/Demo.react.js @@ -58,17 +58,6 @@ 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}, mountNode); diff --git a/package.json b/package.json index d9022fe4d..8c264ce98 100644 --- a/package.json +++ b/package.json @@ -46,12 +46,10 @@ "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": { @@ -89,7 +87,6 @@ "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" diff --git a/src/fragments/Markdown.react.js b/src/fragments/Markdown.react.js index da1506b15..84854e7a7 100644 --- a/src/fragments/Markdown.react.js +++ b/src/fragments/Markdown.react.js @@ -3,10 +3,6 @@ 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'; @@ -135,10 +131,7 @@ export default class DashMarkdown extends Component { {value}, - inlineMath: ({value}) => {value}, html: props => props.escapeHtml ? ( props.value diff --git a/webpack.config.js b/webpack.config.js index a3fa468f9..ee1765a71 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -92,14 +92,6 @@ module.exports = (env, argv) => { }, ], }, - { - test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - use:[ - { - loader: 'url-loader' - } - ] - } ], }, resolve: { @@ -146,4 +138,4 @@ module.exports = (env, argv) => { }) ] } -}; +}; \ No newline at end of file From 91034082d5281000e326b1c2f1da7237c401a719 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Fredrik=20Ki=C3=A6r?= Date: Tue, 10 Mar 2020 08:46:34 +0000 Subject: [PATCH 3/3] Math in dcc.Markdown using MathJax --- package.json | 2 ++ src/fragments/Markdown.react.js | 5 +++++ src/fragments/Math.react.js | 34 +++++++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 src/fragments/Math.react.js diff --git a/package.json b/package.json index 8c264ce98..c8856f6f0 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "color": "^3.1.0", "fast-isnumeric": "^1.1.3", "highlight.js": "^9.17.1", + "mathjax": "^3.0.0", "moment": "^2.20.1", "plotly.js": "1.52.2", "prop-types": "^15.6.0", @@ -50,6 +51,7 @@ "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": { diff --git a/src/fragments/Markdown.react.js b/src/fragments/Markdown.react.js index 84854e7a7..a258a1f11 100644 --- a/src/fragments/Markdown.react.js +++ b/src/fragments/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 RemarkMathPlugin from 'remark-math'; +import Math from './Math.react'; import MarkdownHighlighter from '../utils/MarkdownHighlighter'; import {propTypes, defaultProps} from '../components/Markdown.react'; @@ -131,7 +133,10 @@ export default class DashMarkdown extends Component { , + inlineMath: props => , html: props => props.escapeHtml ? ( props.value diff --git a/src/fragments/Math.react.js b/src/fragments/Math.react.js new file mode 100644 index 000000000..d1f93bab5 --- /dev/null +++ b/src/fragments/Math.react.js @@ -0,0 +1,34 @@ +import React, {Component} from 'react'; +import _ from 'mathjax/es5/tex-svg'; + + +export default class Math 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() { + window.MathJax.typesetPromise([this.span_element.current]); + } + + render() { + return ( + + {this.props.inline ? String.raw`\(` : String.raw`\[`} + {this.props.tex} + {this.props.inline ? String.raw`\)` : String.raw`\]`} + + ) + } +}