My non-worked code as below:
- mathJax.tsx
import { qwikify$ } from "@builder.io/qwik-react";
import { Button } from "@mui/material";
import React from "react";
import { MathJaxContext, MathJax } from "better-react-mathjax";
//import pkg from 'better-react-mathjax';
//const {MathJaxContext, MathJax} = pkg;
export const MUIButton = qwikify$(Button); // MUI lib. is working
export const QwikMathJaxContext = qwikify$(MathJaxContext);
export const QwikMathJax = qwikify$(MathJax);
- YourReactjs.jsx
import { MUIButton } from "~/integrations/react/mathJax";
import { QwikMathJaxContext, QwikMathJax } from "~/integrations/react/mathJax";
function YourReactjs() {
const title = "title1.5";
const config = {
loader: { load: ["input/asciimath"] }
};
return (
<div>
{/* This is a comment */}
<h1>{title}</h1>
<p>This is a testing jsx component</p>
<MUIButton variant="text">Abc</MUIButton>
<QwikMathJaxContext>
<h2>Basic MathJax example with Latex</h2>
<QwikMathJax>{"\\(\\frac{10}{4x} \\approx 2^{12}\\)"}</QwikMathJax>
</QwikMathJaxContext>
<QwikMathJaxContext config={config}>
<h2>Basic MathJax example with Latex</h2>
<QwikMathJax>{"`frac(20)(4x) approx 2^(12)`"}</QwikMathJax>
</QwikMathJaxContext>
</div>
)
}
export default YourReactjs
“frac(20)(4x) approx 2^(12)
” – It cannot show Math symbol.
My working simple jsx code as below:
import { MathJaxContext, MathJax } from "better-react-mathjax";
function Test({ data, setPage}) { // Refer to for _Section.jsx -> <Component /> what para. available
return (
<div>
<MathJaxContext>
<h2>Basic MathJax example with Latex</h2>
<MathJax>{"\\(\\frac{10}{4x} \\approx 2^{12}\\)"}</MathJax>
</MathJaxContext>
</div>
)
}
export default Test
See anyone have some hints to for import a npm lib. in qwik.