React Native MathJax HTML to SVG

https://github.com/webyonet/react-native-mathjax-html-to-svg
Admin
A React Native component that displays mathematics in HTML using MathJax, converting TeX/LaTeX to...
Tokens:872
Snippets:5
Trust Score:8.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install React Native MathJax HTML to SVG with react-native-cli

Source: https://github.com/webyonet/react-native-mathjax-html-to-svg/blob/main/README.md

Commands to install the `react-native-mathjax-html-to-svg` and `react-native-svg` libraries using `yarn` for React Native CLI projects, followed by `pod install` for iOS.

```bash
$ yarn add react-native-mathjax-html-to-svg
$ yarn add react-native-svg
$ cd ios && pod install
```

--------------------------------

### Install React Native MathJax HTML to SVG with Expo CLI

Source: https://github.com/webyonet/react-native-mathjax-html-to-svg/blob/main/README.md

Commands to install the `react-native-mathjax-html-to-svg` and `react-native-svg` libraries using `expo install` for Expo CLI projects.

```bash
$ expo install react-native-mathjax-html-to-svg
$ expo install react-native-svg
```

--------------------------------

### MathJaxSvg Component Props Reference

Source: https://github.com/webyonet/react-native-mathjax-html-to-svg/blob/main/README.md

API documentation for the `MathJaxSvg` React Native component, detailing its configurable properties: `fontSize`, `color`, `fontCache`, and `style`. Each property includes its default value and a description of its purpose and behavior.

```APIDOC
MathJaxSvg Props:
  fontSize:
    Default: 14
    Description: Font size to display formula. Note that it will apply to regular text. Regular text accept inline style if html has inline style.
  color:
    Default: "#000000"
    Description: Color of formula to display. Note that it will apply to regular text. Regular text accept inline style if html has inline style.
  fontCache:
    Default: false
    Description: MathJax will cache font paths on an express-by-expression (each expression has its own cache within the SVG image itself), which makes the SVG self-contained, but still allows for some savings if characters are repeated.
  style:
    Default: "{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', flexShrink: 1 }"
    Description: Container style.
```

--------------------------------

### Display In-line Mathematics in React Native with MathJaxSvg

Source: https://github.com/webyonet/react-native-mathjax-html-to-svg/blob/main/README.md

Demonstrates basic usage of the `MathJaxSvg` component to render a single in-line mathematical expression. It shows importing the component and passing a TeX string as a child, along with `fontSize`, `color`, and `fontCache` props.

```jsx
import { MathJaxSvg } from 'react-native-mathjax-html-to-svg';
...

<MathJaxSvg 
  fontSize={16}
  color="red"
  fontCache={true}
>
  {'$$4sen(α)cos^2(α/2)$$'}
</MathJaxSvg>
```

--------------------------------

### Render TeX/LaTeX Mathematics within HTML in React Native

Source: https://github.com/webyonet/react-native-mathjax-html-to-svg/blob/main/README.md

Illustrates how to embed TeX/LaTeX mathematical expressions directly within HTML content using the `MathJaxSvg` component. It highlights the ability to mix math and text, apply inline styles, and handle both in-line and display equations.

```jsx
import { MathJaxSvg } from 'react-native-mathjax-html-to-svg';

return (
  ...

<MathJaxSvg 
  fontSize={16}
  color="#000000"
  fontCache={true}
>
  {`
    <p>When \\(a \\ne 0\\), there are <u>two solutions</u> to \\(ax^2 + bx + c = 0\\) <span style="color:red;">and</span> they are $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$</p>
    <b>In-line Mathematics</b><br/><p>Finally, while display equations look good for a page of samples, the ability to mix math <mark>and text in a paragraph is also important.</mark><br/><b>This expression \\(\sqrt{3x-1}+(1+x)^2\\) is an <span style="color:red;font-style:italic;">example of an inline equation</span>.</b>As you see, MathJax equations can be used this way as well, without unduly disturbing the <s>spacing between lines</s>.</p>
  `}
</MathJaxSvg>
  ...
);
```
Tokens:
Raw