Update Markdown.tsx

###  Add Math Preprocessing for Markdown Component

#### Summary
This PR introduces preprocessing for math expressions within the Markdown component. The component now transforms inline math (e.g., `\(...\)`) to use the `$ ... $` format and block math (e.g., `\[...\]`) to use the `$$ ... $$` format. This enhancement helps in standardizing the math syntax before it’s processed by the Markdown renderer.

#### Changes
- **Enhanced Markdown Component:**
  - Added a `useMemo` hook in the `Markdown` function to preprocess the `children` content.
  - **Inline Math:** Replaces `\(...\)` with `$ ... $`.
  - **Block Math:** Replaces `\[...\]` with `\n$$\n ... \n$$\n`, ensuring that block math expressions are placed on separate lines.
- **Refactoring:**
  - The processed content is then passed to the existing `MarkdownContent` component, preserving all existing functionalities like code highlighting, link rendering, and file block handling.

#### Rationale
Previously, the Markdown component did not handle the conversion of LaTeX-style math delimiters, which could lead to inconsistent rendering of math expressions. By preprocessing the content, we ensure a more robust and flexible handling of both inline and block math expressions.

#### Possible Drawbacks
- **Non-Mathematical Content Interference:**  
  The preprocessing approach targets `\(...\)` and `\[...\]` delimiters universally. This means that any non-mathematical content using these delimiters for other purposes might be unintentionally transformed, potentially leading to unexpected formatting issues.

#### How to Test
1. **Inline Math:**  
   - Input: `This is inline math: \(a^2 + b^2 = c^2\)`
   - Expected Transformation: `This is inline math: $ a^2 + b^2 = c^2 $`
2. **Block Math:**  
   - Input: `Here is block math: \[ \int_0^\infty e^{-x} dx \]`
   - Expected Transformation:  
     ```
     Here is block math: 
     $$
     \int_0^\infty e^{-x} dx
     $$
     ```
3. **Non-Mathematical Content:**  
   - Ensure that content not intended as math that might incidentally use these delimiters is reviewed to avoid unexpected changes.
4. **Overall Rendering:**  
   - Verify that the Markdown renders as expected with both math expressions and other markdown elements (e.g., code blocks, links).

#### Additional Notes
- The changes maintain backwards compatibility. If there are no math delimiters present, the content remains unaffected.
- The updated component still supports HTML rendering based on the `acceptHtml` prop.
- No changes were made to the auxiliary components (`Label`, `Link`, `Code`), ensuring that the overall markdown styling and functionalities remain consistent.
This commit is contained in:
Hobo12 2025-02-18 10:23:39 +08:00 committed by Deng Junhai
parent ec48ae9a51
commit 7a57d86894

View File

@ -68,21 +68,34 @@ function Markdown({
className, className,
loading, loading,
}: MarkdownProps) { }: MarkdownProps) {
// memoize the component const processedContent = useMemo(() => {
let content = children;
// Inline math: replace \(...\) with $ ... $
content = content.replace(/\\\((.*?)\\\)/g, (_, equation) => `$ ${equation.trim()} $`);
// Block math: replace \[...\] with $$...$$ on separate lines
content = content.replace(
/\s*\\\[\s*([\s\S]*?)\s*\\\]\s*/g,
(_, equation) => `\n$$\n${equation.trim()}\n$$\n`
);
return content;
}, [children]);
return useMemo( return useMemo(
() => ( () => (
<MarkdownContent <MarkdownContent
children={children} children={processedContent}
acceptHtml={acceptHtml} acceptHtml={acceptHtml}
codeStyle={codeStyle} codeStyle={codeStyle}
className={className} className={className}
loading={loading} loading={loading}
/> />
), ),
[children, acceptHtml, codeStyle, className, loading], [processedContent, acceptHtml, codeStyle, className, loading],
); );
} }
type CodeMarkdownProps = MarkdownProps & { type CodeMarkdownProps = MarkdownProps & {
filename: string; filename: string;
}; };