zzish / react-latex Goto Github PK
View Code? Open in Web Editor NEWReact component to render Latex strings
License: MIT License
React component to render Latex strings
License: MIT License
As per README.md the expected behaviour is to add cloudflare served stylesheet link in head as
<head>
<link
href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css"
rel="stylesheet"
/>
</head>
import Latex from "react-latex";
import "katex/dist/katex.min.css";
const MathRender = ({ src }) => {
return <Latex>{src}</Latex>;
};
export default MathRender;
web app built with create-react-app
Is there a way to pass options? for example I want to set strict: false
. Katex options
related to #1
Is there an example of Latex for reacting native????
Is there a way to align the content to the left? Thanks
There is this very similar React wrapper project (which also uses katex under-the-hood) here: https://github.com/talyssonoc/react-katex
The types for this package are needed for Typescript support. @ts-ignore
can be added as a workaround to avoid warnings when using this package inside typescript files. But it would be great if I don't have to do that and have some awesome type completion.
Vertical and horizontal lines are not rendering in fractions and some other elements. I attached screenshots of what's showing up when I try to render the following latex.
<Latex displayMode={true}>{String.raw`$$\cfrac{a}{1 + \cfrac{1}{b}}$$`}</Latex>
What's rendering:
What should be rendered:
<Latex displayMode={true}>{String.raw`$$ \def\arraystretch{1.5}
\begin{array}{c:c:c}
a & b & c \\ \hline
d & e & f \\
\hdashline
g & h & i
\end{array} $$`}</Latex>
Inside of a React component, React treats curly braces as per normal.
How do I achieve a grouped super/sub script? e.g. R_{u,i}
if I define a variable :
let text = "\\href{https://katex.org/}{\KaTeX}";
Then call
<Latex trust={true} throwOnError={false}>{text}</Latex>
it does not display a hyperlink. It directly prints the content of the text variable without interpreting it.
I also tried with \href instead of \href and I got the same result.
I pasted in the arraystretch example found here and got no vertical separators.
https://katex.org/docs/supported.html
\begin{equation} is not rendering.
Using the following code within elements.
$ \begin{equation} 3 \times 4 \end{equation} $
When i'm rendering a katex like this. {mylatex}. Any html that i put inside mylatex doenst get render. I check the props, and by default is rendering math + html. So i dont really no where to go with this. Any ideas? Thanks
When i put data from an api call and store it in redux then i put it in Latex, it does not show me the rendered format, it only shows the code that was given between $$, but when i change the location and go back to the home page, it shows the good format of latex, why is that happening ?
I'm getting this error in production. But not in the development. What should I do now? Please, some one help us.
Hi,
Is there a way to handle both $ and \ delimited latex strings?
I currently have a string that isnt being rendered properly:
\Upsilon_{\mathrm{disc}}^{max} < \ 0.7 \;{\mathrm{M}_\odot}/{\mathrm{L}_\odot}
however, strings delimited like
When trying to use Bra-Ket notation using the code given on https://katex.org/docs/supported.html#special-notation, it is not rendering.
The following code snippet only renders half the matrix for some reason.
var Latex = require("react-latex");
function RenderBasisVector() {
const LatexString = `$$ \\vert 0 \\rang = \\begin{pmatrix} 1 \\\\ 0 \\end{pmatrix} \\quad\\quad \\vert 1 \\rang = \\begin{pmatrix} 0 \\\\ 1 \\end{pmatrix}$$`
return (
<h3><Latex displayMode={true}>{LatexString}</Latex></h3>
);
}
export default RenderBasisVector;
In the index.html file I have imported both
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-ko6T2DjISesD0S+wOIeHKMyKsHvWpdQ1s/aiaQMbL+TIXx3jg6uyf9hlv3WWfwYv" crossorigin="anonymous">
The expression works fine on katex.org and with a latex compiler. No matter how I change the matrices only half of it is rendered in react.
As mentioned in the KaTeX readme:
Rendering options
You can provide an object of options as the last argument to katex.render and katex.renderToString. Available options are:
displayMode: boolean. If true the math will be rendered in display mode, which will put the math in display style (so \int and \sum are large, for example), and will center the math on the page on its own line. If false the math will be rendered in inline mode. (default: false)
It would be great to enable/disable this with something like:
<Latex displayMode={true}>$y = x$</Latex>
latexString which parse tex string to katex string. it will help to render tex string at the server side or in react native project.
When I try to render this component
const Math = props => (
<div>
<Latex>What is $(3\times 4) \div \pm (5-3)$</Latex
<Latex>When $(a \ne 0)$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}.$</Latex>
</div>
)
I get:
I think it is because of curly brackets in \frac{...}{...}
but I have no idea how to fix it.
Does anyone have a suggestion?
I want my LaTeX to be bigger.
Hi,
I'm quite new to FE-development and have a security question:
Is it a possible vulnerability that dangerouslySetInnerHTML is being used here, in the case of accepting user input?
Thanks for your help!
When including Latex tags in a responsive p the Latex formulas do not shrink onto new lines when on mobile device.
Hi, I want to render only the latex part from the paragraph's content.
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.