feat: add support for LaTeX math rendering in markdown (#119)

* feat: add support for LaTeX math rendering in markdown

* feat: enhance markdown extraction to support LaTeX math rendering in both Android and iOS

* feat: add context menu for copying LaTeX and Markdown in MathContainerView for Android and iOS

* feat: add support for LaTeX math rendering in HTML generation for Android and iOS

* docs: update README and documentation to include LaTeX math rendering details and styling options

* feat: add MathInlineRenderer, MathInlineSpan, InlineMathStyle, and MathStyle to support LaTeX

* chore: remove sampleMarkdownLatex file

* docs: clarify color property description in LaTeX math styling documentation

* refactor(ios): simplify latex extraction check in ENRMMathInlineRenderer

* fix(ios): update accessibility label to use cached LaTeX in ENRMMathContainerView

* refactor(ios): remove unused context menu pragma

Author: hryhoriiK97

README.md

@@ -8,6 +8,7 @@
 - 🎯 High-performance Markdown parsing with [md4c](https://github.com/mity/md4c)
 - 📐 CommonMark standard compliant
 - 📊 GitHub Flavored Markdown (GFM)
+- 🧮 LaTeX math rendering (block `$$...$$` with `flavor="github"`, inline `$...$` in all flavors)
 - 🎨 Fully customizable styles for all elements
 - 📱 iOS and Android support
 - 🏛 Supports only the New Architecture (Fabric)
@@ -167,6 +168,38 @@ Task lists with interactive checkboxes are available when `flavor="github"` is s
 />
 ```
 
+### LaTeX Math
+
+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"`.
+
+```tsx
+<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.
+
 ### Link Handling
 
 Links in Markdown are interactive and can be handled with the `onLinkPress` and `onLinkLongPress` callbacks:
@@ -204,10 +237,8 @@ See the [API Reference](docs/API_REFERENCE.md) for a detailed overview of all th
 
 We're actively working on expanding the capabilities of `react-native-enriched-markdown`. Here's what's on the roadmap:
 
-- GFM (GitHub Flavored Markdown) Support
-- LaTeX / Math Rendering
 - `EnrichedMarkdownInput`
-- Web Implementation via `react-native-web`
+- Web implementation via `react-native-web`
 
 ## Contributing
 

ReactNativeEnrichedMarkdown.podspec

@@ -23,5 +23,7 @@ Pod::Spec.new do |s|
     'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17'
   }
 
+  s.dependency 'iosMath', '~> 0.9'
+
   install_modules_dependencies(s)
 end

android/build.gradle

@@ -70,6 +70,7 @@ android {
 repositories {
   mavenCentral()
   google()
+  maven { url 'https://jitpack.io' }
 }
 
 def kotlin_version = getExtOrDefault("kotlinVersion")
@@ -79,6 +80,10 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   // Baseline Profile installer for AOT compilation hints
   implementation "androidx.profileinstaller:profileinstaller:1.3.1"
+  // LaTeX math rendering
+  implementation("com.github.gregcockroft:AndroidMath:v1.1.0") {
+    exclude group: 'com.google.guava', module: 'guava'
+  }
 }
 
 ktlint {

android/src/main/baseline-prof.txt

@@ -40,6 +40,7 @@ Lcom/swmansion/enriched/markdown/renderer/LinkRenderer;
 Lcom/swmansion/enriched/markdown/renderer/ListContextManager;
 Lcom/swmansion/enriched/markdown/renderer/ListItemRenderer;
 Lcom/swmansion/enriched/markdown/renderer/ListRenderer;
+Lcom/swmansion/enriched/markdown/renderer/MathInlineRenderer;
 Lcom/swmansion/enriched/markdown/renderer/NodeRenderer;
 Lcom/swmansion/enriched/markdown/renderer/ParagraphRenderer;
 Lcom/swmansion/enriched/markdown/renderer/Renderer;
@@ -62,6 +63,7 @@ Lcom/swmansion/enriched/markdown/spans/ImageSpan;
 Lcom/swmansion/enriched/markdown/spans/LineHeightSpan;
 Lcom/swmansion/enriched/markdown/spans/LinkSpan;
 Lcom/swmansion/enriched/markdown/spans/MarginBottomSpan;
+Lcom/swmansion/enriched/markdown/spans/MathInlineSpan;
 Lcom/swmansion/enriched/markdown/spans/OrderedListSpan;
 Lcom/swmansion/enriched/markdown/spans/StrikethroughSpan;
 Lcom/swmansion/enriched/markdown/spans/StrongSpan;
@@ -79,8 +81,10 @@ Lcom/swmansion/enriched/markdown/styles/EmphasisStyle;
 Lcom/swmansion/enriched/markdown/styles/HeadingStyle;
 Lcom/swmansion/enriched/markdown/styles/ImageStyle;
 Lcom/swmansion/enriched/markdown/styles/InlineImageStyle;
+Lcom/swmansion/enriched/markdown/styles/InlineMathStyle;
 Lcom/swmansion/enriched/markdown/styles/LinkStyle;
 Lcom/swmansion/enriched/markdown/styles/ListStyle;
+Lcom/swmansion/enriched/markdown/styles/MathStyle;
 Lcom/swmansion/enriched/markdown/styles/ParagraphStyle;
 Lcom/swmansion/enriched/markdown/styles/StrikethroughStyle;
 Lcom/swmansion/enriched/markdown/styles/StrongStyle;
@@ -116,4 +120,5 @@ Lcom/swmansion/enriched/markdown/utils/text/view/TextViewSetupKt;
 # Views
 Lcom/swmansion/enriched/markdown/views/BlockSegmentView;
 Lcom/swmansion/enriched/markdown/views/ContextMenuPopup;
+Lcom/swmansion/enriched/markdown/views/MathContainerView;
 Lcom/swmansion/enriched/markdown/views/TableContainerView;

android/src/main/cpp/jni-adapter.cpp

@@ -60,6 +60,10 @@ static jint nodeTypeToJavaOrdinal(NodeType type) {
       return 22;
     case NodeType::TableCell:
       return 23;
+    case NodeType::LatexMathInline:
+      return 24;
+    case NodeType::LatexMathDisplay:
+      return 25;
     default:
       return 0;
   }

android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdown.kt

@@ -20,6 +20,7 @@ import com.swmansion.enriched.markdown.styles.StyleConfig
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkLongPressEvent
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkPressEvent
 import com.swmansion.enriched.markdown.views.BlockSegmentView
+import com.swmansion.enriched.markdown.views.MathContainerView
 import com.swmansion.enriched.markdown.views.TableContainerView
 import java.util.concurrent.ExecutorService
 import java.util.concurrent.Executors
@@ -35,6 +36,10 @@ private sealed interface RenderSegment {
   data class Table(
     val node: MarkdownASTNode,
   ) : RenderSegment
+
+  data class Math(
+    val latex: String,
+  ) : RenderSegment
 }
 
 class EnrichedMarkdown
@@ -170,10 +175,24 @@ class EnrichedMarkdown
             splitASTIntoSegments(ast).map { segmentNode ->
               when (segmentNode) {
                 is MarkdownASTNode -> {
-                  if (segmentNode.type == MarkdownASTNode.NodeType.Table) {
-                    RenderSegment.Table(segmentNode)
-                  } else {
-                    renderTextSegment(listOf(segmentNode), style)
+                  when (segmentNode.type) {
+                    MarkdownASTNode.NodeType.Table -> {
+                      RenderSegment.Table(segmentNode)
+                    }
+
+                    MarkdownASTNode.NodeType.LatexMathDisplay -> {
+                      val latex =
+                        if (segmentNode.children.isNotEmpty()) {
+                          segmentNode.children.first().content
+                        } else {
+                          segmentNode.content
+                        }
+                      RenderSegment.Math(latex)
+                    }
+
+                    else -> {
+                      renderTextSegment(listOf(segmentNode), style)
+                    }
                   }
                 }
 
@@ -221,6 +240,7 @@ class EnrichedMarkdown
           when (segment) {
             is RenderSegment.Text -> createTextView(segment)
             is RenderSegment.Table -> createTableView(segment, style)
+            is RenderSegment.Math -> createMathView(segment, style)
           }
         segmentViews.add(view)
         addView(view)
@@ -254,6 +274,13 @@ class EnrichedMarkdown
       applyTableNode(segment.node)
     }
 
+    private fun createMathView(
+      segment: RenderSegment.Math,
+      style: StyleConfig,
+    ) = MathContainerView(context, style).apply {
+      applyLatex(segment.latex)
+    }
+
     private fun splitASTIntoSegments(root: MarkdownASTNode): List<Any> {
       val segments = mutableListOf<Any>()
       val currentTextBuffer = mutableListOf<MarkdownASTNode>()
@@ -269,6 +296,9 @@ class EnrichedMarkdown
         if (child.type == MarkdownASTNode.NodeType.Table) {
           flushTextBuffer()
           segments.add(child)
+        } else if (child.type == MarkdownASTNode.NodeType.LatexMathDisplay) {
+          flushTextBuffer()
+          segments.add(child)
         } else {
           currentTextBuffer.add(child)
         }

android/src/main/java/com/swmansion/enriched/markdown/MeasurementStore.kt

@@ -19,6 +19,7 @@ import com.swmansion.enriched.markdown.styles.StyleConfig
 import com.swmansion.enriched.markdown.utils.common.getBooleanOrDefault
 import com.swmansion.enriched.markdown.utils.common.getMapOrNull
 import com.swmansion.enriched.markdown.utils.common.getStringOrDefault
+import com.swmansion.enriched.markdown.views.MathContainerView
 import com.swmansion.enriched.markdown.views.TableContainerView
 import java.util.concurrent.ConcurrentHashMap
 import kotlin.math.ceil
@@ -273,6 +274,11 @@ object MeasurementStore {
     data class Table(
       val node: MarkdownASTNode,
     ) : MarkdownSegment
+
+    data class Math(
+      val latex: String,
+      val node: MarkdownASTNode,
+    ) : MarkdownSegment
   }
 
   private fun measureAndCacheSplit(
@@ -331,6 +337,14 @@ object MeasurementStore {
               totalHeightPx += style.tableStyle.marginBottom
             }
           }
+
+          is MarkdownSegment.Math -> {
+            totalHeightPx += style.mathStyle.marginTop
+            totalHeightPx += MathContainerView.measureMathHeight(segment.latex, style.mathStyle, context)
+            if (includeBottomMargin) {
+              totalHeightPx += style.mathStyle.marginBottom
+            }
+          }
         }
       }
 
@@ -379,11 +393,26 @@ object MeasurementStore {
     }
 
     for (child in root.children) {
-      if (child.type == MarkdownASTNode.NodeType.Table) {
-        flushTextNodes()
-        segments.add(MarkdownSegment.Table(child))
-      } else {
-        currentTextNodes.add(child)
+      when (child.type) {
+        MarkdownASTNode.NodeType.Table -> {
+          flushTextNodes()
+          segments.add(MarkdownSegment.Table(child))
+        }
+
+        MarkdownASTNode.NodeType.LatexMathDisplay -> {
+          flushTextNodes()
+          val latex =
+            if (child.children.isNotEmpty()) {
+              child.children.first().content
+            } else {
+              child.content
+            }
+          segments.add(MarkdownSegment.Math(latex, child))
+        }
+
+        else -> {
+          currentTextNodes.add(child)
+        }
       }
     }
     flushTextNodes()

android/src/main/java/com/swmansion/enriched/markdown/parser/MarkdownASTNode.kt

@@ -31,6 +31,8 @@ data class MarkdownASTNode(
     TableRow,
     TableHeaderCell,
     TableCell,
+    LatexMathInline,
+    LatexMathDisplay,
   }
 
   fun getAttribute(key: String): String? = attributes[key]

android/src/main/java/com/swmansion/enriched/markdown/renderer/MathInlineRenderer.kt

@@ -0,0 +1,44 @@
+package com.swmansion.enriched.markdown.renderer
+
+import android.content.Context
+import android.text.SpannableStringBuilder
+import com.swmansion.enriched.markdown.parser.MarkdownASTNode
+import com.swmansion.enriched.markdown.spans.MathInlineSpan
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
+
+class MathInlineRenderer(
+  private val config: RendererConfig,
+  private val context: Context,
+) : NodeRenderer {
+  override fun render(
+    node: MarkdownASTNode,
+    builder: SpannableStringBuilder,
+    onLinkPress: ((String) -> Unit)?,
+    onLinkLongPress: ((String) -> Unit)?,
+    factory: RendererFactory,
+  ) {
+    val latex = extractLatex(node)
+    if (latex.isEmpty()) return
+
+    val blockStyle = factory.blockStyleContext.requireBlockStyle()
+
+    val start = builder.length
+    builder.append("\uFFFC")
+    val end = builder.length
+
+    val span =
+      MathInlineSpan(
+        context = context,
+        latex = latex,
+        fontSize = blockStyle.fontSize,
+        textColor = config.style.inlineMathStyle.color,
+      )
+
+    builder.setSpan(span, start, end, SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE)
+  }
+
+  private fun extractLatex(node: MarkdownASTNode): String {
+    if (!node.content.isNullOrEmpty()) return node.content!!
+    return node.children.mapNotNull { it.content }.joinToString("")
+  }
+}

android/src/main/java/com/swmansion/enriched/markdown/renderer/NodeRenderer.kt

@@ -56,6 +56,7 @@ class RendererFactory(
       MarkdownASTNode.NodeType.Image to ImageRenderer(config, context),
       MarkdownASTNode.NodeType.LineBreak to lineBreakRenderer,
       MarkdownASTNode.NodeType.ThematicBreak to ThematicBreakRenderer(config),
+      MarkdownASTNode.NodeType.LatexMathInline to MathInlineRenderer(config, context),
     )
   }