LaTeX Math

June 25, 2026 · View on GitHub

LaTeX math rendering is supported for both block and inline equations:

  • Block math ($$...$$): Rendered as a standalone display element. Requires flavor="github".
  • Inline math ($...$): Rendered within the text flow. Works with both flavor="commonmark" and flavor="github".

Usage

<EnrichedMarkdownText
  flavor="github"
  markdown={`
The quadratic formula:

$$x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$$

Einstein's mass-energy equivalence $E = mc^2$ is one of the most famous equations.
  `}
  markdownStyle={{
    math: {
      fontSize: 20,
      color: '#1F2937',
      backgroundColor: '#F3F4F6',
      padding: 12,
      textAlign: 'center',
    },
    inlineMath: {
      color: '#1F2937',
    },
  }}
/>

Block math equations are rendered as standalone display elements with spacing and an optional background. Inline math inherits the surrounding block's typography.

Important

LaTeX commands use backslashes (e.g. \frac, \alpha). In regular JS strings and template literals, backslashes are escape characters. Use String.raw or double backslashes (\\frac) to preserve them. Block math ($$...$$) must be on its own line to render as a display element.

Web

On web the library renders LaTeX via KaTeX in MathML output mode. Browsers render MathML natively — no CSS or font files are required.

Installation

Install the optional peer dependency:

npm install katex
# or
yarn add katex

KaTeX is loaded lazily the first time a LaTeX node is encountered, so it has no impact on pages that do not render math. No stylesheet or <link> tag is needed.

Note

MathML is supported natively in Chrome 109+, Firefox, and Safari. Older browsers will display the raw LaTeX source as a text fallback.

Disabling on web

Pass latexMath: false in md4cFlags to skip parsing and treat $ as plain text:

<EnrichedMarkdownText markdown="Price is \$5" md4cFlags={{ latexMath: false }} />

This also prevents KaTeX from being loaded at runtime.

Disabling LaTeX Math (reducing bundle size)

LaTeX math rendering relies on RaTeX — a native, KaTeX-compatible math engine — on both iOS and Android. It is included by default but can be excluded to reduce your app's binary size (~3–5 MB on iOS, varies on Android).

1. Disable at the parser level (JS)

Set latexMath: false in md4cFlags so the parser treats $ as plain text:

<EnrichedMarkdownText markdown="Price is \$5" md4cFlags={{ latexMath: false }} />

This alone prevents math rendering without any native changes. The steps below go further by removing the native math libraries from your binary entirely.

2. Remove the native iOS dependency

Add the following to your Podfile and re-run pod install:

ENV['ENRICHED_MARKDOWN_ENABLE_MATH'] = '0'

This excludes RaTeX from the build. Rebuild the app after running pod install.

Note

When math is enabled (the default), your Podfile must use dynamic frameworks:

use_frameworks! :linkage => :dynamic

This is required for CocoaPods to resolve the RaTeX Swift Package dependency.

Note

macOS: LaTeX math is currently not supported on macOS because react-native-macos does not support use_frameworks! (microsoft/react-native-macos#1969). Math is automatically disabled in the macOS example app.

3. Remove the native Android dependency

Add the following to your project's gradle.properties:

enrichedMarkdown.enableMath=false

This excludes RaTeX from the Android build. Rebuild the app after changing this property.

4. Expo config plugin

If you are using Expo, you can use the built-in config plugin to disable LaTeX math rendering on both platforms at once.

Add the following to your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "react-native-enriched-markdown",
        {
          "enableMath": false
        }
      ]
    ]
  }
}

This will automatically apply both the iOS and Android native changes listed above during npx expo prebuild.

If you later re-enable math (e.g. remove the plugin or set enableMath: true), run npx expo prebuild --clean so native projects are regenerated without the disable flags, then rebuild.