Rendering math Equation

[ashokkumar-hub]

import Markdown, { MarkdownIt } from 'react-native-markdown-display';
import markdownItKatex from '@iktakahiro/markdown-it-katex';
import wikilinks from '@gerhobbelt/markdown-it-wikilinks';

const markdownItInstance = 
  MarkdownIt({typographer: true})
  .use(wikilinks, {})
  .use(markdownItKatex);
  
const markdownstyles = {
  body: {
    fontFamily: "Poppins-Medium",
    color: "#070519"
  },
  heading1: {
    fontSize: 32,
    fontFamily: "Poppins-Bold",
    color: '#070519',
  },
  heading2: {
    fontSize: 24
  },
  heading3: {
    fontSize: 18
  },
  heading4: {
    fontSize: 16,
  },
  heading5: {
    fontSize: 13,
  },
  heading6: {
    fontSize: 11,
  }
};

const copy = `
This is some text which is red because of the body style, which is also really small!

Pythagoran theorem is $a^2 + b^2 = c^2$. $\frac{1}{2}$
Bayes theorem:
$$P(A | B) = (P(B | A)P(A)) / P(B)$$
# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$

## Page One

This is the content of Page One. You can [[Technology]](Page Two) or [Page Three](Page Three).
`;

 <Markdown 
        style={markdownstyles}
        markdownit={markdownItInstance}
        mergeStyle={true}
 >
        {copy}
      </Markdown>

Result if don't use rules

 WARN  Warning, unknown render rule encountered: wikilink. 'unknown' render rule used (by default, returns null - nothing rendered)
 WARN  Warning, unknown render rule encountered: math_inline. 'unknown' render rule used (by default, returns null - nothing rendered)
 WARN  Warning, unknown render rule encountered: math_block. 'unknown' render rule used (by default, returns null - nothing rendered)

Adding rules to markdown

 <Markdown 
        style={markdownstyles}
        markdownit={markdownItInstance}
        mergeStyle={true}
        rules={{
          wikilink: (node, children, parent, styles) =>{
            const linkText = node.sourceMeta.match[3] ? node.sourceMeta.match[3] : node.sourceMeta.match[1]
            return (
              <Text
                style={{color: "blue", fontSize: 16, fontFamily: "Poppins-Medium"}}
                key={node.key}
                onPress={() => {console.log(`Handle the link press and take the user to '${node.sourceMeta.match[1]}' - you will have to parse this string and work out how to handle it in the context of your app / deep links / http links etc. etc. with Linking or ReactRouter or whatever you are using`)}}>
                {linkText}
              </Text>
            );
          },
          math_inline: (node, children) => {
            return (
              <Text style={{color: "red", fontSize: 14, fontFamily: "Poppins-Regular"}} key={node.key}>{node.content}</Text>
            )
          },
          math_block: (node, children) => {
            return (
              <Text style={{color: "red", fontSize: 14, fontFamily: "Poppins-Regular"}} key={node.key}>{node.content}</Text>
            )
          }
        }}
>

Output is

[ashokkumar-hub]

Based on my understanding, using markdown-it-katex alone will not render the equation; a React Native component must be utilized.

[danielrhodes]

@ashokkumar-hub I use a combination of markdown-it-math and react-native-math-view. You will need to add a custom rule to render the equations though.

[jamespotgieter]

Could you please send your implementation? @danielrhodes

[murat-aksoy]

I also need the same implementation. Can you please share it? @danielrhodes