{"_id":"@caporeista/math-latex","_rev":"5-addd4fbc770e5ea939c22e8f1ba4ba10","name":"@caporeista/math-latex","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@caporeista/math-latex","version":"1.0.0","keywords":["react","latex","katex","math","html","renderer"],"author":"","license":"MIT","_id":"@caporeista/math-latex@1.0.0","maintainers":[{"name":"caporeista","email":"caporeista@gmail.com"}],"dist":{"shasum":"82ce58a06c506f782063d5fc97257f61d4ced77f","tarball":"https://registry.npmjs.org/@caporeista/math-latex/-/math-latex-1.0.0.tgz","fileCount":8,"integrity":"sha512-Ob01wNi4unuU+O0EaBzvUKGtxr5R5Ny4atPyVlE+kU397cVrb/NGP6Y2NHIhxnlNdgm8Bqmib4vIwp0Ba5yafw==","signatures":[{"sig":"MEUCIHU1ZDfqTHQqSLjRVljL5mEh8PzbZ4X5DVO0axWmgoFWAiEAtETiqoDf2ORgH1sJAXdsVDEJLu4TVnIyIKcPC18guiQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11050},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"dev":"tsup src/index.tsx --format cjs,esm --dts --watch","build":"tsup src/index.tsx --format cjs,esm --dts"},"_npmUser":{"name":"caporeista","email":"caporeista@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.2.0","description":"A powerful and lightweight React component to render complex LaTeX, MathML, and HTML content seamlessly.","directories":{},"_nodeVersion":"23.10.0","dependencies":{"katex":"^0.16.10"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","typescript":"^5.5.2","@types/katex":"^0.16.7","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/math-latex_1.0.0_1752568823346_0.0420848652457122","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@caporeista/math-latex","version":"1.0.1","keywords":["react","latex","katex","math","html","renderer"],"author":"","license":"MIT","_id":"@caporeista/math-latex@1.0.1","maintainers":[{"name":"caporeista","email":"caporeista@gmail.com"}],"dist":{"shasum":"a5a10b0089f1fe09a55b9299ff67041d9d5ab738","tarball":"https://registry.npmjs.org/@caporeista/math-latex/-/math-latex-1.0.1.tgz","fileCount":8,"integrity":"sha512-/r/Rb5CKxa1z+/9bXM89DSAJBlWxjaKTsyMZaMarOgZv0nPHu2+7QGwVPVhHeaAVtRpzxyeY+enrjPHdbLSEzQ==","signatures":[{"sig":"MEUCICBXTKRrvmOQHsCXPUOH07r56mudrk97UdyMLTc4zxIRAiEAqgIAh3DPi4CRlEUOPa097hdU90ub8ppUdqNG0K+QgPQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10544},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"dev":"tsup src/index.tsx --format cjs,esm --dts --watch","build":"tsup src/index.tsx --format cjs,esm --dts"},"_npmUser":{"name":"caporeista","email":"caporeista@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.2.0","description":"A powerful and lightweight React component to render complex LaTeX, MathML, and HTML content seamlessly.","directories":{},"_nodeVersion":"23.10.0","dependencies":{"katex":"^0.16.10"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","typescript":"^5.5.2","@types/katex":"^0.16.7","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/math-latex_1.0.1_1752569750720_0.5368816276531068","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@caporeista/math-latex","version":"1.0.2","keywords":["react","latex","katex","math","html","renderer"],"author":"","license":"MIT","_id":"@caporeista/math-latex@1.0.2","maintainers":[{"name":"caporeista","email":"caporeista@gmail.com"}],"dist":{"shasum":"1d551ac1a96c5531b309cea097cc215fa8df0bac","tarball":"https://registry.npmjs.org/@caporeista/math-latex/-/math-latex-1.0.2.tgz","fileCount":8,"integrity":"sha512-mEVLwrGY0KvG/MW0J+q+/xFBUK0eXoxQVSTSw6ykFJVyV88lZWTohRzIGOt03sSTvew/AFAEudSFLfMi6hgKEA==","signatures":[{"sig":"MEYCIQDCmTHQj3ey53Jdf/9L8fOJBUEUwGjmC+CXniFC9FmB5QIhAIA8API8tKalhX97PRIMAUy2JvoAm3/FWnihqAGY5yTH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10852},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"dev":"tsup src/index.tsx --format cjs,esm --dts --watch","build":"tsup src/index.tsx --format cjs,esm --dts"},"_npmUser":{"name":"caporeista","email":"caporeista@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.2.0","description":"A powerful and lightweight React component to render complex LaTeX, MathML, and HTML content seamlessly.","directories":{},"_nodeVersion":"23.10.0","dependencies":{"katex":"^0.16.10"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","typescript":"^5.5.2","@types/katex":"^0.16.7","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/math-latex_1.0.2_1752571446573_0.9185055007408152","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@caporeista/math-latex","version":"1.0.3","keywords":["react","latex","katex","math","html","markdown","renderer","typography"],"author":{"name":"caporeista"},"license":"MIT","_id":"@caporeista/math-latex@1.0.3","maintainers":[{"name":"caporeista","email":"caporeista@gmail.com"}],"dist":{"shasum":"6d696c25ef187f52b91e3fbaef6b83b35993faa3","tarball":"https://registry.npmjs.org/@caporeista/math-latex/-/math-latex-1.0.3.tgz","fileCount":6,"integrity":"sha512-PPlhw5M98MO1Hak4zg//jp1jTi3S/eVV137a7wnRa/EyD35wodmmivYCXAuU/bvVM+3/XH/p8i28sMSzO17G+Q==","signatures":[{"sig":"MEQCIAn0ecTvC7Zp/FTCTS5H/+ov4x98mILGb04J3u44vctqAiAq0hURJFpUBbwwShQefjqowaVwx5KE5H9povrrh/KtjQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12984},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"dev":"tsup src/index.tsx --format cjs,esm --dts --watch","build":"tsup src/index.tsx --format cjs,esm --dts","prepublishOnly":"yarn build"},"_npmUser":{"name":"caporeista","email":"caporeista@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.2.0","description":"A powerful and lightweight React component to render complex LaTeX, MathML, and HTML content seamlessly with Markdown support.","directories":{},"_nodeVersion":"23.10.0","dependencies":{"katex":"^0.16.10"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","typescript":"^5.5.2","@types/katex":"^0.16.7","@types/react":"^18.3.3","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/math-latex_1.0.3_1760432255048_0.368977031294792","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@caporeista/math-latex","version":"1.0.4","description":"A powerful and lightweight React component to render complex LaTeX, MathML, and HTML content seamlessly with Markdown support.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"tsup src/index.tsx --format cjs,esm --dts","dev":"tsup src/index.tsx --format cjs,esm --dts --watch","prepublishOnly":"yarn build"},"keywords":["react","latex","katex","math","html","markdown","renderer","typography"],"author":{"name":"caporeista"},"license":"MIT","repository":{"type":"git","url":""},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"katex":"^0.16.10"},"devDependencies":{"tsup":"^8.1.0","typescript":"^5.5.2","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@types/katex":"^0.16.7"},"_id":"@caporeista/math-latex@1.0.4","_nodeVersion":"23.10.0","_npmVersion":"11.2.0","dist":{"integrity":"sha512-mZfnPN6Spzlgw8tX4CaaCbCvqRtsRnKw30jpJftp0NbKcvwXcj4oKDAsO98FAS8SRHHMZa1GOoiD1aQpqXtFuw==","shasum":"3c8d8c142cffd34c2d2d3c68fc95750abc98f476","tarball":"https://registry.npmjs.org/@caporeista/math-latex/-/math-latex-1.0.4.tgz","fileCount":6,"unpackedSize":12820,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCcJQzdyjBzzFl1NLkmcImpl/Q8jryUl0Xobf8Mym1IQQIhAKnu9TWyH7vzFOHMGgy4++T0ytbMea/T3o+qMAfsE0lB"}]},"_npmUser":{"name":"caporeista","email":"caporeista@gmail.com"},"directories":{},"maintainers":[{"name":"caporeista","email":"caporeista@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/math-latex_1.0.4_1760436241560_0.06263748782393441"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-15T08:40:23.225Z","modified":"2025-10-14T10:04:01.939Z","1.0.0":"2025-07-15T08:40:23.507Z","1.0.1":"2025-07-15T08:55:50.946Z","1.0.2":"2025-07-15T09:24:06.764Z","1.0.3":"2025-10-14T08:57:35.226Z","1.0.4":"2025-10-14T10:04:01.751Z"},"author":{"name":"caporeista"},"license":"MIT","keywords":["react","latex","katex","math","html","markdown","renderer","typography"],"repository":{"type":"git","url":""},"description":"A powerful and lightweight React component to render complex LaTeX, MathML, and HTML content seamlessly with Markdown support.","maintainers":[{"name":"caporeista","email":"caporeista@gmail.com"}],"readme":"# Math-Latex\n\nThis package was created to render mixed **HTML** and **LaTeX** expressions within a single, powerful React component. It uses **KaTeX** for fast and beautiful mathematical typesetting.\n\nThis package is designed to parse a single string containing mixed content (text, LaTeX, and HTML tags like `![]()
`) and render it correctly in your React application.\n\nTested and working with Next.js 14 and 15.\n\n## Features\n\n- **Mixed Content Rendering:** Renders strings containing plain text, LaTeX, and HTML tags in the correct order.\n- **High-Quality Typesetting:** Uses KaTeX for beautiful and fast math rendering.\n- **HTML Support:** Renders HTML tags like `![]()
` directly, allowing you to embed images and other HTML content alongside your formulas.\n- **SSR Friendly:** Works seamlessly with Server-Side Rendering (SSR) frameworks like Next.js.\n- **Lightweight and Simple API:** A single component is all you need.\n\n## Installation\n\nUsing yarn:\n\n```bash\nyarn add @caporeista/math-latex\n```\n\nUsing npm:\n\n```bash\nnpm install @caporeista/math-latex\n```\n\n## Usage\n\nSimply import the `MathLatex` component and pass your content string as a child.\n\n```jsx\nimport React from 'react';\nimport MathLatex from '@caporeista/math-latex';\nimport 'katex/dist/katex.min.css'; // Don't forget to import KaTeX styles\n\nconst content = `\n The solution to the equation $$x^2+y^2=z^2$$ is a Pythagorean triple.\n Here is an image related to the topic:\n ![\"example\"](\"https://res.cloudinary.com/dgkk9picj/image/upload/v1752141385/ocr-images/file_fbcfqr.jpg\")
\n And here is an inline formula: $E=mc^2$.\n`;\n\nfunction MyComponent() {\n return (\n \n
My Document
\n {content}\n \n );\n}\n\nexport default MyComponent;\n```\n\n**Important:** You must import the KaTeX CSS file (`katex/dist/katex.min.css`) in your application's entry point (e.g., `_app.tsx` in Next.js or `index.js` in Create React App) for the mathematical formulas to be styled correctly.\n\n## How It Works\n\nThe component intelligently parses the input string, splitting it into three types of parts:\n1. **LaTeX expressions** (e.g., `$E=mc^2$` or `$$...$$`)\n2. **HTML tags** (e.g., `![]()
`)\n3. **Plain text**\n\nIt then renders each part accordingly, using KaTeX for the math and standard React elements for the rest. This ensures that all content appears in the correct order and format.\n\n## Support\n\nIf you find this project helpful, consider supporting me with a coffee!\n\n![\"Buy](\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\")
\n\n","readmeFilename":"README.md"}