Gibt es eine Möglichkeit, LaTeX in Markdown - React Native anzuzeigen? ⇐ JavaScript

[Guest]

Ich baue eine KI-Assistenten-App und habe Schwierigkeiten, LaTeX-Inhalte neben Markdown-gerendertem Text anzuzeigen. Derzeit verwende ich „react-native-markdown-display“ für die Markdown-Unterstützung und das (veraltete) „react-native-math-view“ für LaTeX.
Eine Lösung, die ich versucht habe, bestand darin, den Inhalt mit einem regulären Ausdruck zu analysieren, um Markdown- und LaTeX-Segmente aufzuteilen, und sie dann bedingt mit oder zu rendern. Dies funktioniert zwar bis zu einem gewissen Grad, führt jedoch zu erheblichen Ausrichtungs- und Formatierungsproblemen.
Unten ist meine aktuelle MessageRenderer-Komponente aufgeführt, die diesen Ansatz implementiert:

Code: Select all

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import MathView, {MathText} from 'react-native-math-view';
import {textStyle} from "../styles/common.style";
import Markdown from "react-native-markdown-display";
import {MsgType} from "./class/MessageItem";

const MessageRenderer = ({message, type}) => {
const parts = parseMessage(message);

return (

{parts.map((part, index) => {
if (part.type === 'text') {
return (

{part.content}

);
} else if (part.type === 'math') {
return (

);
}
return null;
})}

);
};

const parseMessage = (message) => {
const regex = /\\\(([\s\S]*?)\\\)|\\\[([\s\S]*?)\\]/g; // Matches math expressions within \(...\) or \[...\]
const parts = [];
let lastIndex = 0;

try {
message.replace(regex, (match, group1, group2, index) => {
// Add text content before the current match
if (lastIndex < index) {
parts.push({ type: 'text', content: message.slice(lastIndex, index) });
}

// Add the matched math content
const formula = group1 || group2;
parts.push({ type: 'math', content: formula });

// Update the lastIndex to the end of the current match
lastIndex = index + match.length;
});

// Add any remaining text after the last match
if (lastIndex < message.length) {
parts.push({ type: 'text', content: message.slice(lastIndex) });
}
} catch (e) {
console.log("error", e);
return parts;
}

return parts;
};

const styles = () => {
return StyleSheet.create({
main: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center'
},
normalText: {
...textStyle.Body_4,
color: 'white'
},
mathText: {
...textStyle.Body_4,
marginHorizontal: 2,
color: 'white'
},
assistantNormalText: {
...textStyle.Body3,
color: 'white'
}
});
};

export default MessageRenderer;

Beispieltestdaten

Code: Select all

const message = `

- This is a paragraph with some inline math: \\(E = mc^2\\).

- Some text with inline math \\(a^2 + b^2 = c^2\\)

- And block math

\\[
e = sum_(n=0)^oo 1/n!
\\]

\\[
\\int_{a}^{b} x^2 dx
\\]

Here is a JavaScript code block:

\`\`\`javascript
function greet() {
console.log("Hello, world!");
}
\`\`\`

And some more inline math: \\(a^2 + b^2 = c^2\\).
`;

Frage

Gibt es eine robustere oder einfachere Methode, um Markdown und LaTeX zusammen zu rendern? in React Native, ohne den Inhalt manuell über Regex analysieren zu müssen?