Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@matejmazur/react-katex
Advanced tools
Readme
Display math expressions with KaTeX and React.
(based on the https://github.com/talyssonoc/react-katex)
(the readme and the demo are "forked" from https://github.com/talyssonoc/react-katex)
Comparison with react-katex
: https://github.com/talyssonoc/react-katex/issues/49.
$ npm install katex @matejmazur/react-katex
# or
$ yarn add katex @matejmazur/react-katex
import 'katex/dist/katex.min.css';
import TeX from '@matejmazur/react-katex';
Display math in the middle of the text.
ReactDOM.render(
<TeX math="\\int_0^\\infty x^2 dx" />,
document.getElementById('math')
);
// or
ReactDOM.render(
<TeX>\int_0^\infty x^2 dx</TeX>,
document.getElementById('math')
);
It will be rendered like this:
Display math in a separated block, with larger font and symbols.
ReactDOM.render(
<TeX math="\\int_0^\\infty x^2 dx" block />,
document.getElementById('math')
);
// or
ReactDOM.render(
<TeX block>\int_0^\infty x^2 dx</TeX>,
document.getElementById('math')
);
It will be rendered like this:
Note:
Don't forget to import KaTeX CSS file.
import 'katex/dist/katex.min.css';
By default the error rendering is handled by KaTeX. You can optionally pass errorColor
(defaults to #cc0000
) as a prop:
ReactDOM.render(
<TeX math={'\\int_0^\\infty x^2 dx \\inta'} errorColor={'#cc0000'} />,
document.getElementById('math')
);
This will be rendered like so:
It's possible to handle parse errors using the prop renderError
. This prop must be a function that receives the error object and returns what should be rendered when parsing fails:
ReactDOM.render(
<TeX
math="\\int_{"
renderError={(error) => {
return <b>Fail: {error.name}</b>;
}}
/>,
document.getElementById('math')
);
// The code above will render '<b>Fail: ParseError</b>' because it's the value returned from `renderError`.
This will render <b>Fail: ParseError</b>
:
You can change the wrapper component (block math uses div
and inline uses span
) by whatever you want via props.as
attribute.
ReactDOM.render(
<TeX
math="y = x^2"
as="figcaption"
/>,
document.getElementById('math')
);
In addition to using the math
property, you can also quote as a child allowing the use of { }
in your expression.
ReactDOM.render(
<TeX>{'\\frac{\\text{m}}{\\text{s}^2}'}</TeX>,
document.getElementById('math')
);
Or Multiline
ReactDOM.render(
<TeX>{`\\frac{\\text{m}}
{\\text{s}^2}`}</TeX>,
document.getElementById('math')
);
However, it can be annoying to escape backslashes. This can be circumvented with the String.raw
tag on a template literal when using ES6.
ReactDOM.render(
<TeX>{String.raw`\frac{\text{m}}{\text{s}^2}`}</TeX>,
document.getElementById('math')
);
Backticks must be escaped with a backslash but would be passed to KaTeX as \`. A tag can be created to replace \` with `
const latex = (...a) => String.raw(...a).replace('\\`', '`');
ReactDOM.render(<TeX>{latex`\``}</TeX>, document.getElementById('math'));
You can even do variable substitution
const top = 'm';
const bottom = 's';
ReactDOM.render(
<TeX>{String.raw`\frac{\text{${top}}}{\text{${bottom}}^2}`}</TeX>,
document.getElementById('math')
);
You can change directly all KaTeX options via props.settings
:
Example of adding a custom macro:
ReactDOM.render(
<TeX settings={{ macros: { '*': '\\cdot' } }}>y = k * x + c</TeX>
);
Result:
FAQs
Display math in TeX with KaTeX and ReactJS
We found that @matejmazur/react-katex demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).