mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-23 03:54:21 +00:00
🔧 Use @matejmazur/react-katex for text rendering (#1)
This commit is contained in:
parent
bebf7e30ae
commit
3828b589a1
6 changed files with 53 additions and 58 deletions
69
package-lock.json
generated
69
package-lock.json
generated
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "bluelib",
|
"name": "bluelib",
|
||||||
"version": "0.24.3",
|
"version": "0.24.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -1289,6 +1289,11 @@
|
||||||
"integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
|
"integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@matejmazur/react-katex": {
|
||||||
|
"version": "3.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@matejmazur/react-katex/-/react-katex-3.1.3.tgz",
|
||||||
|
"integrity": "sha512-rBp7mJ9An7ktNoU653BWOYdO4FoR4YNwofHZi+vaytX/nWbIlmHVIF+X8VFOn6c3WYmrLT5FFBjKqCZ1sjR5uQ=="
|
||||||
|
},
|
||||||
"@nodelib/fs.scandir": {
|
"@nodelib/fs.scandir": {
|
||||||
"version": "2.1.4",
|
"version": "2.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
|
||||||
|
@ -3209,9 +3214,9 @@
|
||||||
"integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
|
"integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
|
||||||
},
|
},
|
||||||
"commander": {
|
"commander": {
|
||||||
"version": "6.2.1",
|
"version": "2.20.3",
|
||||||
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||||
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
|
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||||
},
|
},
|
||||||
"common-dir": {
|
"common-dir": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
|
@ -4698,11 +4703,6 @@
|
||||||
"estraverse": "^4.1.1"
|
"estraverse": "^4.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"esm": {
|
|
||||||
"version": "3.2.25",
|
|
||||||
"resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
|
|
||||||
"integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA=="
|
|
||||||
},
|
|
||||||
"esprima": {
|
"esprima": {
|
||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
|
||||||
|
@ -7475,6 +7475,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"katex": {
|
||||||
|
"version": "0.12.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/katex/-/katex-0.12.0.tgz",
|
||||||
|
"integrity": "sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==",
|
||||||
|
"requires": {
|
||||||
|
"commander": "^2.19.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"kew": {
|
"kew": {
|
||||||
"version": "0.7.0",
|
"version": "0.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
|
||||||
|
@ -7730,24 +7738,6 @@
|
||||||
"unquote": "^1.1.0"
|
"unquote": "^1.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"mathjax-full": {
|
|
||||||
"version": "3.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.1.2.tgz",
|
|
||||||
"integrity": "sha512-jFCwRFdFwIOa8J7r6VZT0AIv9ZwbLQ9aPc9YZp695NTvv7XKU2NunJodA+zDWzElIFJ7mTsImyfe5R3QyRNZjw==",
|
|
||||||
"requires": {
|
|
||||||
"esm": "^3.2.25",
|
|
||||||
"mj-context-menu": "^0.6.1",
|
|
||||||
"speech-rule-engine": "^3.1.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"mathjax-react": {
|
|
||||||
"version": "1.0.6",
|
|
||||||
"resolved": "https://registry.npmjs.org/mathjax-react/-/mathjax-react-1.0.6.tgz",
|
|
||||||
"integrity": "sha512-GlkPAhaY0FKc95TMdo33mxNZHb+3xRgfgc3YcnQ0cZxvnM1UaF0o8mRI5y5xIwi3JnioeYuukZJWCbIZkACIVw==",
|
|
||||||
"requires": {
|
|
||||||
"mathjax-full": "^3.0.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"maxstache": {
|
"maxstache": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/maxstache/-/maxstache-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/maxstache/-/maxstache-1.0.7.tgz",
|
||||||
|
@ -8135,11 +8125,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"mj-context-menu": {
|
|
||||||
"version": "0.6.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
|
|
||||||
"integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
|
|
||||||
},
|
|
||||||
"mkdirp": {
|
"mkdirp": {
|
||||||
"version": "0.5.5",
|
"version": "0.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
|
||||||
|
@ -12326,16 +12311,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"speech-rule-engine": {
|
|
||||||
"version": "3.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/speech-rule-engine/-/speech-rule-engine-3.1.1.tgz",
|
|
||||||
"integrity": "sha512-FGX8B44yI3yGhmcw8nZ/by2ffUlZG6m5b/O3RULXsSiwhL/evL+jwQ6BXQxV3gGtOYptOFalTVCAFknAJgBKAg==",
|
|
||||||
"requires": {
|
|
||||||
"commander": "^6.0.0",
|
|
||||||
"wicked-good-xpath": "^1.3.0",
|
|
||||||
"xmldom-sre": "^0.1.31"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"split-string": {
|
"split-string": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
|
||||||
|
@ -14131,11 +14106,6 @@
|
||||||
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
|
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"wicked-good-xpath": {
|
|
||||||
"version": "1.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
|
|
||||||
"integrity": "sha1-gbDpXoZQ5JyUsiKY//hoa1VTz2w="
|
|
||||||
},
|
|
||||||
"wide-align": {
|
"wide-align": {
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
|
||||||
|
@ -14266,11 +14236,6 @@
|
||||||
"integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==",
|
"integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"xmldom-sre": {
|
|
||||||
"version": "0.1.31",
|
|
||||||
"resolved": "https://registry.npmjs.org/xmldom-sre/-/xmldom-sre-0.1.31.tgz",
|
|
||||||
"integrity": "sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw=="
|
|
||||||
},
|
|
||||||
"xmlhttprequest-ssl": {
|
"xmlhttprequest-ssl": {
|
||||||
"version": "1.5.5",
|
"version": "1.5.5",
|
||||||
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
|
||||||
|
|
|
@ -18,9 +18,10 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/preset-env": "^7.12.11",
|
"@babel/preset-env": "^7.12.11",
|
||||||
"@babel/preset-react": "^7.12.10",
|
"@babel/preset-react": "^7.12.10",
|
||||||
|
"@matejmazur/react-katex": "^3.1.3",
|
||||||
"@reach/router": "^1.3.4",
|
"@reach/router": "^1.3.4",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"mathjax-react": "^1.0.6",
|
"katex": "^0.12.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
|
|
|
@ -3,6 +3,7 @@ Render a Latex math string.
|
||||||
It can be displayed in block format by setting the `block` prop to `true`.
|
It can be displayed in block format by setting the `block` prop to `true`.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
import LatexMath from "./index";
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
|
@ -12,5 +13,15 @@ It can be displayed in block format by setting the `block` prop to `true`.
|
||||||
<p>
|
<p>
|
||||||
(Don't confuse it with the area, which is <LatexMath>{`4 \\pi r^2`}</LatexMath>!)
|
(Don't confuse it with the area, which is <LatexMath>{`4 \\pi r^2`}</LatexMath>!)
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
Do you know what <code>abs()</code> is?
|
||||||
|
</p>
|
||||||
|
<LatexMath block={true}>{`
|
||||||
|
| x | = \\begin{cases}
|
||||||
|
x \\qquad x > 0\\\\
|
||||||
|
0 \\qquad x = 0\\\\
|
||||||
|
-x \\qquad x < 0
|
||||||
|
\\end{cases}
|
||||||
|
`}</LatexMath>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { MathComponent } from 'mathjax-react'
|
import "katex/dist/katex.css";
|
||||||
|
import TeX from '@matejmazur/react-katex';
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
|
||||||
export default function LatexMath({children, block}) {
|
export default function LatexMath({children, block}) {
|
||||||
return (
|
return (
|
||||||
<MathComponent tex={children} display={block ?? false}/>
|
<TeX math={children} block={block}/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@ export {default as Code} from "./Code";
|
||||||
export {default as Color} from "./Color";
|
export {default as Color} from "./Color";
|
||||||
export {default as Help} from "./Help";
|
export {default as Help} from "./Help";
|
||||||
export {default as Italic} from "./Italic";
|
export {default as Italic} from "./Italic";
|
||||||
export {default as LatexMath} from "./LatexMath";
|
// export {default as LatexMath} from "./LatexMath"; // Do not export this, it should use dynamic load if imported
|
||||||
export {default as ListItem} from "./ListItem";
|
export {default as ListItem} from "./ListItem";
|
||||||
export {default as Main} from "./Main";
|
export {default as Main} from "./Main";
|
||||||
export {default as Paragraph} from "./Paragraph";
|
export {default as Paragraph} from "./Paragraph";
|
||||||
|
|
|
@ -8,7 +8,7 @@ module.exports = {
|
||||||
loader: "babel-loader"
|
loader: "babel-loader"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /[.]css$/,
|
test: /[.]module[.]css$/,
|
||||||
use: [
|
use: [
|
||||||
"style-loader",
|
"style-loader",
|
||||||
{
|
{
|
||||||
|
@ -19,7 +19,24 @@ module.exports = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /(?<![.]module)[.]css$/,
|
||||||
|
use: [
|
||||||
|
"style-loader",
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
modules: false
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /[.](?:ttf|woff|woff2)$/,
|
||||||
|
loader: "file-loader"
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue