change color

[archievega]

How to change color of formula? I've tried almost everything

[PankajPunia]

@em1tao Try passing styles like below:

const defaultOptions = {
  messageStyle: 'none',
  extensions: ['tex2jax.js'],
  jax: ['input/TeX', 'output/HTML-CSS'],
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)'],
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\[', '\\]'],
    ],
    processEscapes: true,
  },
  TeX: {
    extensions: [
      'AMSmath.js',
      'AMSsymbols.js',
      'noErrors.js',
      'noUndefined.js',
    ],
  },
};

const MathHtml: React.FC<MathHtmlProps> = ({
  html,
  webViewStyles,
  mathJaxStyles = {'background-color': 'white', color: 'black'},
  scrollEnabled = true,
  fontSize,
}) => {
  const [height, setHeight] = useState(1);
  const mathJaxOptions = {
    styles: {
      '#formula': {
        'font-size': fontSize,
        ...mathJaxStyles,
      },
    },
  };
  const wrapMathjax = (content: string) => {
    const options = JSON.stringify(
      Object.assign({}, defaultOptions, mathJaxOptions),
    );

    return `
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			<script type="text/x-mathjax-config">
				MathJax.Hub.Config(${options});

				MathJax.Hub.Queue(function() {
					var height = document.documentElement.scrollHeight;
					window.ReactNativeWebView.postMessage(String(height));
					document.getElementById("formula").style.visibility = '';
				});
			</script>

			<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
			<div id="formula" style="visibility: hidden;">
				${content}
			</div>
		`;
  };

  const sourceHtml = wrapMathjax(html);

  const handleMessage = (message: WebViewMessageEvent) => {
    setHeight(Number(message.nativeEvent.data));
  };

  return (
    <WebView
      scrollEnabled={scrollEnabled}
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      onMessage={handleMessage}
      source={{html: sourceHtml}}
      containerStyle={{height}}
      style={[styles.viewStyles, webViewStyles]}
      androidHardwareAccelerationDisabled={true}
    />
  );
};

const styles = StyleSheet.create({
  viewStyles: {
    opacity: 0.99,
    overflow: 'hidden',
    flex: 1,
  },
});

export default MathHtml;

[ph3rro]

I think your code is cut off can you please edit it @PankajPunia

[PankajPunia]

@sickopickle done.

[ph3rro]

@PankajPunia thank you! I've decided to just use react-native-math-view instead.