zzish / react-latex Goto Github PK

I'm getting this error in production. But not in the development. What should I do now? Please, some one help us.

I want my LaTeX to be bigger.

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 ?

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?

\begin{equation} is not rendering.
Using the following code within elements.
$ \begin{equation} 3 \times 4 \end{equation} $

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.

When trying to use Bra-Ket notation using the code given on https://katex.org/docs/supported.html#special-notation, it is not rendering.

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>

What's rendering:

What should be rendered:

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>

Is there a way to pass options? for example I want to set strict: false. Katex options

related to #1

I pasted in the arraystretch example found here and got no vertical separators.
https://katex.org/docs/supported.html

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'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

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.

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.

Hi, I want to render only the latex part from the paragraph's content.

When including Latex tags in a responsive p the Latex formulas do not shrink onto new lines when on mobile device.

Is there a way to align the content to the left? Thanks

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!

There is this very similar React wrapper project (which also uses katex under-the-hood) here: https://github.com/talyssonoc/react-katex

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>

my questions are :

1. instead of defining the stylesheet in head, can i add katex npm package to my code and import stylesheet defined in its dist folder ? something like this

import Latex from "react-latex";
import "katex/dist/katex.min.css";

const MathRender = ({ src }) => {
	return <Latex>{src}</Latex>;
};

export default MathRender;

2. if i can add it, then whats the difference between the both ?

Project Details:

web app built with create-react-app

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}

Is there an example of Latex for reacting native????

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 $LATEX$ are rendering correctly.