matejbransky / react-katex Goto Github PK
View Code? Open in Web Editor NEWDisplay math in TeX with KaTeX and ReactJS
License: MIT License
Display math in TeX with KaTeX and ReactJS
License: MIT License
Is there any way to parse latex inside a text paragraph through component.
ex: "Solve this:
I can do this through katex but don't find any way to achieve this using component, I don't know where and how many times Latex will be added in a paragraph so I'm wondering how to get this using component.
Describe the bug
Currently the component completely crashes when Katex throws an exception, making the entire page go blank if that happens.
It is mentioned nowhere that you would need Error Boundaries. I would suggest either changing the documentation to add some form of error handling on the user-site, or handle the error in the component
To Reproduce
Katex crashes on the following input \begin{\pmatrix}
. Render the Tex component with that input. It crashes.
Expected behavior
Either it not crashing, or mentioning in the documentation / usage that it can crash!
I'm trying to use katex
and @matejmazur/react-katex
with Next.js.
I'm getting this error: Failed to compile error:
./node_modules/@matejmazur/react-katex/src/index.tsx
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import KaTeX, { ParseError, KatexOptions } from 'katex';
|
> const TeX: React.FC<TeXProps> = ({
| children,
| math,
I have this in my next.config.js
file:
// next.config.js
const katex = require('katex')
module.exports = {
future: {
webpack5: true,
},
webpack: function (config, options) {
config.experiments = {}
return config
},
katex,
}
I think I'm missing something. Would anybody have any suggestions?
It's been a few month with no changes, so it would be nice to release a new version
Describe the bug
When we write long strings with TeX that has block=false some symbols create a new line and I think that is not the expected result
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Should not create a new line if any symbols were added
Screenshots
Block prop false
Block prop true
Desktop (please complete the following information):
Smartphone (please complete the following information):
N/A
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@testing-library/jest-dom
, @testing-library/react
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@testing-library/jest-dom
, @types/react
, @types/react-dom
, prettier
, typescript
)katex
, @types/katex
)@types/react
, @types/react-dom
, react
, react-dom
)demo/package.json
katex 0.12.0
react 16.14.0
react-dom 16.14.0
@matejbransky/eslint-config 1.0.0-alpha.2
@matejbransky/prettier-config 1.0.0-alpha.2
@matejbransky/typescript-config 1.0.0-alpha.1
@types/katex 0.11.0
@types/react 16.14.5
@types/react-dom 16.9.11
eslint 6.8.0
parcel 1.12.4
prettier 2.2.1
rimraf 3.0.2
typescript 3.9.9
package.json
@matejbransky/eslint-config 1.0.0-alpha.2
@matejbransky/jest-preset 1.0.0-alpha.2
@matejbransky/prettier-config 1.0.0-alpha.2
@matejbransky/typescript-config 1.0.0-alpha.1
@testing-library/jest-dom 5.11.9
@testing-library/react 10.4.9
@types/katex 0.11.0
@types/react 16.14.5
@types/react-dom 16.9.11
eslint 6.8.0
husky 4.3.8
jest 26.6.3
katex 0.12.0
lint-staged 10.5.4
microbundle 0.12.4
prettier 2.2.1
react 16.14.0
react-dom 16.14.0
react-error-boundary 2.3.2
rimraf 3.0.2
snapshot-diff 0.8.1
typescript 3.9.9
katex >=0.9
react >=16
node >=12
yarn >=1.1
Title is self-descriptive
Describe the bug
When trying to user the renderToString
function available in react-dom/server
, the resulting HTML output does not contain the equation.
To Reproduce
import React from 'react';
import { renderToString } from 'react-dom/server';
import BlockMath from '@matejmazur/react-katex';
// KaTeX support
import 'katex/dist/katex.min.css'
function TeXter() {
const tex = renderToString(<BlockMath math="f(x)=\lim_{x\to\infin}\int_a^b e^x" />);
return (
<div className="content" dangerouslySetInnerHTML={{__html: tex}}>
</div>
);
}
//...
Expected behavior
To return the complete HTML rendering of a given TeX equation.
Screenshots
This is the resulting HTML
Additional context
The react-katex
package appears to be working just fine in this context
To get to this stage I just changed the import line to import {BlockMath} from 'react-katex';
Describe the bug
When I use this lib to display piecewise function in "f(x) = \left{\begin{array}{ll}-x & \quad x \leq 0 \x & \quad x > 0\end{array}\right.",it alerted as "KaTeX parse error: Expected '}', got '&' at position 32: …n{array}{ll}-x &̲ quad x leq 0 x…"
. But this statement for PieceWise function works in https://katex.org/ wetsite.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
I am currently using the talyssonoc/react-katex and wanted to know if this library had helper functions such as
katex.__parse(value);
katex.renderToString(value, { displayMode: false, })
I could not find any documentation for the same and wanted to know if it is possible,
Describe the bug
Since there are no types for this package, it doesn't work with TypeScript.
To Reproduce
Steps to reproduce the behavior:
.tsx
fileExpected behavior
No compiler error, types exist and are accessible
Additional context
Add types to DefinitelyTyped for best results
Description
It seems that I need a lot of boilerplate around microbundle it doesn't contain settings for testing and TS. And it's frustrating that there are now a lot of warnings and errors when I install deps. Tsdx looks promising and it has support for testing right out of the box so I'll try to replace microbundle with tsdx.
Expected
Clean development environment.
Hello,
Thanks for making this package. I ran into a couple of issues when trying to render a simple formula:
<TeX
block
math={String.raw`F(x) = \int^a_b \frac{1}{3}x^3`}
settings={{
displayMode: true,
output: 'mathml'
}}
/>
block
and settings.displayMode
)htmlAndMathml
, just like KaTeX, but this does not correspond with the live examples (maybe because another version is used under the hood?)Any help would be greatly appreciated!
After upgrading to @matejmazur/react-katex v3.1.2 in my Create React App project, the project now fails to compile, showing the following error message in the browser:
Failed to compile
./node_modules/@matejmazur/react-katex/dist/react-katex.modern.js 14:15 Module parse failed: Unexpected token (14:15) File was processed with these loaders: * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | }) => { | const E = c || (i ? "div" : "span"), > f = e ?? a, | [h, p] = n({ | innerHtml: ""
This error occurred during the build time and cannot be dismissed.
This error also occurs with @matejmazur/react-katex v3.1.1, but my project does compile correctly with v3.1.0.
If you don't mind cloning a branch of my project, that'll give you the most complete context for the error:
git clone --single-branch --branch react-katex-bug https://github.com/tywmick/rt-simulator.git
yarn
yarn start
For my page to compile correctly like it did with v3.0.2.
I think I've figured out how to fix it, the issue being the new modern
bundle being mapped to the "module"
field in package.json
. I'll write a PR with my fix next—I just felt like I should document the issue itself separately for some reason.
One missing feature that I'd love that is not built in into the original react-katex or katex itself is parsing text. This is normally achieved in katex by using the auto-render plugin. The structure I am thinking off is having a prop (e.g. parse
) that you can pass to activate it, as well as some config to define which delimiters to use. There would be another file on the source folder (e.g. parse.ts
) and it would be dynamically imported if the parse
prop is true.
Can the dependencies be updated to work with React 17? I'm on react@"^17.0.1"
Currently, the dependency is react@"^15.32.2 || ^16.0.0"
which would require installing with npm i react-katex --legacy-peer-deps
https://gist.github.com/filipesmedeiros/c10b3065e20c4d61ba746ab78c6a7a9e
Is your feature request related to a problem? Please describe.
The current version doesn't run on the server, although it needs no interactivity (in regular use cases). So a RSC seems logical.
Describe the solution you'd like
The one I provided (a RSC) or similar.
Describe alternatives you've considered
None necessary
Additional context
For use with frameworks like Next.js 13 on app dir
I just didn't know the best way to package this, and didn't have the dev env for your repo setup, so I though this would be an easier and more direct way to contribute. You can make all necessary adjustments :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.