Math-Latex

This 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.

This package is designed to parse a single string containing mixed content (text, LaTeX, and HTML tags like <img>) and render it correctly in your React application.

Tested and working with Next.js 14 and 15.

Features

• Mixed Content Rendering: Renders strings containing plain text, LaTeX, and HTML tags in the correct order.
• High-Quality Typesetting: Uses KaTeX for beautiful and fast math rendering.
• HTML Support: Renders HTML tags like <img> directly, allowing you to embed images and other HTML content alongside your formulas.
• SSR Friendly: Works seamlessly with Server-Side Rendering (SSR) frameworks like Next.js.
• Lightweight and Simple API: A single component is all you need.

Installation

Using yarn:

yarn add @caporeista/math-latex

Using npm:

npm install @caporeista/math-latex

Usage

Simply import the MathLatex component and pass your content string as a child.

import React from 'react';
import MathLatex from '@caporeista/math-latex';
import 'katex/dist/katex.min.css'; // Don't forget to import KaTeX styles

const content = `
  The solution to the equation $$x^2+y^2=z^2$$ is a Pythagorean triple.
  Here is an image related to the topic:
  <img src="https://res.cloudinary.com/dgkk9picj/image/upload/v1752141385/ocr-images/file_fbcfqr.jpg" alt="example" width="300" />
  And here is an inline formula: $E=mc^2$.
`;

function MyComponent() {
  return (
    <div>
      <h1>My Document</h1>
      <MathLatex>{content}</MathLatex>
    </div>
  );
}

export default MyComponent;

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.

How It Works

The component intelligently parses the input string, splitting it into three types of parts:

1. LaTeX expressions (e.g., $E=mc^2$ or $$...$$)
2. HTML tags (e.g., <img>)
3. Plain text

It 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.

Support

If you find this project helpful, consider supporting me with a coffee!