Fix LaTeX UI rendering for shell code #6162

alex-ameen · 2025-12-17T23:02:48Z

Fixes issue where underscores and dollar signs in plain text were being interpreted as LaTeX/KaTeX syntax, causing rendering issues in the UI.

The problem was introduced in PR #5773 which added KaTeX support via remarkMath and rehypeKatex plugins. These plugins interpret:

_ as subscript markers
$...$ as inline math delimiters

This caused issues with:

Shell commands like: cmd "$FOO" --opt="$BAR"
Variable names: variable_name, another_variable
File paths: /path/to/my_file_name.txt
Log output with underscores and dollar signs

Solution:

Added escapeLatexOutsideCode() function that identifies code blocks and inline code sections
Escapes _ to \_ and $ to \$ only in plain text
Preserves original characters inside code blocks and inline code
Also escapes backslashes to prevent double-escaping issues

Added comprehensive tests covering:

Underscores in plain text vs code
Dollar signs in shell commands vs code blocks
Mixed content scenarios
File paths and environment variables
Log output with special characters

Summary

Type of Change

AI Assistance

This PR was created or reviewed with AI assistance

Testing

Related Issues

Relates to #ISSUE_ID
Discussion: LINK (if any)

Screenshots/Demos (for UX changes)

Before:

After:

Fixes issue where underscores and dollar signs in plain text were being interpreted as LaTeX/KaTeX syntax, causing rendering issues in the UI. The problem was introduced in PR block#5773 which added KaTeX support via remarkMath and rehypeKatex plugins. These plugins interpret: - `_` as subscript markers - `$...$` as inline math delimiters This caused issues with: - Shell commands like: cmd "$FOO" --opt="$BAR" - Variable names: variable_name, another_variable - File paths: /path/to/my_file_name.txt - Log output with underscores and dollar signs Solution: - Added escapeLatexOutsideCode() function that identifies code blocks and inline code sections - Escapes `_` to `\_` and `$` to `\$` only in plain text - Preserves original characters inside code blocks and inline code - Also escapes backslashes to prevent double-escaping issues Added comprehensive tests covering: - Underscores in plain text vs code - Dollar signs in shell commands vs code blocks - Mixed content scenarios - File paths and environment variables - Log output with special characters

Copilot

Pull request overview

This PR attempts to fix rendering issues caused by KaTeX interpreting underscores and dollar signs as LaTeX syntax in plain text. The solution escapes these characters outside of code blocks to prevent misinterpretation in shell commands, variable names, and file paths.

Key Changes:

Added escapeLatexOutsideCode() function that identifies code blocks/inline code and escapes special characters only in plain text
Added escapeLatexChars() helper that escapes _, $, and \ characters
Integrated escaping into the content processing pipeline after HTML security wrapping

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
ui/desktop/src/components/MarkdownContent.tsx	Implements LaTeX character escaping logic and integrates it into the markdown rendering pipeline
ui/desktop/src/components/MarkdownContent.test.tsx	Adds comprehensive tests for the new escaping functionality covering various scenarios with underscores, dollar signs, and mixed content

Critical Issues Identified:

The implementation has a fundamental design flaw: it breaks all legitimate LaTeX math rendering by escaping ALL dollar signs outside code blocks. This means users cannot write mathematical expressions like $x^2 + y^2$ anymore, which defeats the purpose of having the remarkMath and rehypeKatex plugins enabled. The PR description doesn't acknowledge this tradeoff, and one test (line 479-490) even confirms this behavior with a contradictory comment.

Additionally, the regex pattern for detecting inline code doesn't handle double-backtick syntax (code with ` backtick), and the backslash escaping could corrupt existing escaped markdown characters like \*.

Copilot · 2025-12-17T23:06:24Z

ui/desktop/src/components/MarkdownContent.test.tsx

+  describe('LaTeX/KaTeX Escaping', () => {
+    it('escapes underscores in plain text to prevent subscript rendering', async () => {
+      const content = 'This is a variable_name and another_variable_name in text.';
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('This is a variable_name and another_variable_name in text.');
+      });
+
+      // Should not have any subscript elements
+      const subscripts = container.querySelectorAll('sub');
+      expect(subscripts).toHaveLength(0);
+    });
+
+    it('escapes dollar signs in shell commands to prevent math mode', async () => {
+      const content = 'Run this command: cmd "$FOO" --opt="$BAR"';
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('Run this command: cmd "$FOO" --opt="$BAR"');
+      });
+
+      // Should not have any KaTeX math elements
+      const mathElements = container.querySelectorAll('.katex');
+      expect(mathElements).toHaveLength(0);
+    });
+
+    it('preserves underscores inside inline code', async () => {
+      const content = 'Use `variable_name` and `another_variable` in your code.';
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(screen.getByText('variable_name')).toBeInTheDocument();
+        expect(screen.getByText('another_variable')).toBeInTheDocument();
+      });
+
+      // Underscores in code should be preserved
+      const codeElements = container.querySelectorAll('code');
+      expect(codeElements.length).toBeGreaterThan(0);
+    });
+
+    it('preserves dollar signs inside code blocks', async () => {
+      const content = `\`\`\`bash
+cmd "$FOO" --opt="$BAR"
+echo "$HOME"
+\`\`\``;
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('cmd "$FOO" --opt="$BAR"');
+        expect(container).toHaveTextContent('echo "$HOME"');
+      });
+
+      // Should not have any KaTeX math elements
+      const mathElements = container.querySelectorAll('.katex');
+      expect(mathElements).toHaveLength(0);
+    });
+
+    it('handles mixed content with underscores in text and code', async () => {
+      const content = `This is some_variable in text.
+
+\`\`\`python
+def some_function():
+    return some_variable
+\`\`\`
+
+And more text_with_underscores here.`;
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('This is some_variable in text.');
+        expect(container).toHaveTextContent('def some_function():');
+        expect(container).toHaveTextContent('And more text_with_underscores here.');
+      });
+
+      // Should not have any subscript elements
+      const subscripts = container.querySelectorAll('sub');
+      expect(subscripts).toHaveLength(0);
+    });
+
+    it('allows actual LaTeX math when explicitly written', async () => {
+      const content = 'The equation is: $x^2 + y^2 = z^2$';
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        // The math should be rendered (or at least attempted)
+        // Since we're escaping $ signs, this will NOT render as math
+        // This test verifies our escaping is working
+        expect(container).toHaveTextContent('The equation is: $x^2 + y^2 = z^2$');
+      });
+    });
+
+    it('handles file paths with underscores', async () => {
+      const content = 'Check the file at /path/to/my_file_name.txt and /another/path_to/file.log';
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('/path/to/my_file_name.txt');
+        expect(container).toHaveTextContent('/another/path_to/file.log');
+      });
+
+      // Should not have any subscript elements
+      const subscripts = container.querySelectorAll('sub');
+      expect(subscripts).toHaveLength(0);
+    });
+
+    it('handles environment variables in text', async () => {
+      const content = 'Set $HOME and $PATH variables, also check $USER.';
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('Set $HOME and $PATH variables, also check $USER.');
+      });
+
+      // Should not have any KaTeX math elements
+      const mathElements = container.querySelectorAll('.katex');
+      expect(mathElements).toHaveLength(0);
+    });
+
+    it('handles log output with underscores and dollar signs', async () => {
+      const content = `Command output:
+test_function_name called with $arg1="value" and $arg2="other_value"
+Error in module_name at line_number 42`;
+
+      const { container } = render(<MarkdownContent content={content} />);
+
+      await waitFor(() => {
+        expect(container).toHaveTextContent('test_function_name');
+        expect(container).toHaveTextContent('$arg1="value"');
+        expect(container).toHaveTextContent('other_value');
+        expect(container).toHaveTextContent('module_name');
+      });
+
+      // Should not have subscripts or math elements
+      const subscripts = container.querySelectorAll('sub');
+      const mathElements = container.querySelectorAll('.katex');
+      expect(subscripts).toHaveLength(0);
+      expect(mathElements).toHaveLength(0);
+    });


Missing test for double-backtick inline code (e.g., code with ` backtick), which is valid markdown syntax for including backticks in inline code. The current regex pattern in escapeLatexOutsideCode doesn't handle this case, so dollar signs and underscores inside double-backtick code could be incorrectly escaped.

Copilot · 2025-12-17T23:06:24Z

ui/desktop/src/components/MarkdownContent.tsx

+  // Match code blocks (```...```) and inline code (`...`)
+  // This regex captures:
+  // - Fenced code blocks: ```lang\n...\n```
+  // - Inline code: `...`
+  const codePattern = /(```[\s\S]*?```|`[^`\n]+?`)/g;


The regex doesn't handle double-backtick inline code (code with ` backtick), which is valid markdown for including backticks in inline code. This pattern will only match single backticks, potentially leaving double-backtick code unprotected from LaTeX escaping. Consider using a pattern like (?:``[^]+?``|[^\n]+?`)` to handle both cases.

Suggested change

// Match code blocks (```...```) and inline code (`...`)

// This regex captures:

// - Fenced code blocks: ```lang\n...\n```

// - Inline code: `...`

const codePattern = /(```[\s\S]*?```|`[^`\n]+?`)/g;

// Match code blocks (```...```) and inline code (`...` or ``...``)

// This regex captures:

// - Fenced code blocks: ```lang\n...\n```

// - Inline code with single backticks: `...`

// - Inline code with double backticks: ``...``

const codePattern = /(```[\s\S]*?```|``[^`]+?``|`[^`\n]+?`)/g;

Copilot · 2025-12-17T23:06:24Z

ui/desktop/src/components/MarkdownContent.test.tsx

+        // The math should be rendered (or at least attempted)
+        // Since we're escaping $ signs, this will NOT render as math
+        // This test verifies our escaping is working
+        expect(container).toHaveTextContent('The equation is: $x^2 + y^2 = z^2$');


This test contradicts the PR's purpose. The test comment says "The math should be rendered (or at least attempted)" but then the assertion says "Since we're escaping $ signs, this will NOT render as math". The escaping logic escapes ALL dollar signs outside code blocks, which means legitimate LaTeX math expressions like $x^2 + y^2 = z^2$ will NOT render as math. This breaks the intended functionality of the remarkMath/rehypeKatex plugins. Users cannot write math equations anymore.

Suggested change

// The math should be rendered (or at least attempted)

// Since we're escaping $ signs, this will NOT render as math

// This test verifies our escaping is working

expect(container).toHaveTextContent('The equation is: $x^2 + y^2 = z^2$');

// The math should be rendered (or at least attempted) by remark-math/rehype-katex

// Verify that KaTeX has been invoked and the equation is present in the output

const mathElements = container.querySelectorAll('.katex');

expect(mathElements.length).toBeGreaterThan(0);

expect(container).toHaveTextContent(/x\^2\s*\+\s*y\^2\s*=\s*z\^2/);

Copilot · 2025-12-17T23:06:25Z

ui/desktop/src/components/MarkdownContent.tsx

+function escapeLatexOutsideCode(content: string): string {
+  const parts: string[] = [];
+  let lastIndex = 0;
+
+  // Match code blocks (```...```) and inline code (`...`)
+  // This regex captures:
+  // - Fenced code blocks: ```lang\n...\n```
+  // - Inline code: `...`
+  const codePattern = /(```[\s\S]*?```|`[^`\n]+?`)/g;
+
+  let match;
+  while ((match = codePattern.exec(content)) !== null) {
+    // Add the text before this code block/inline code (with escaping)
+    const textBefore = content.slice(lastIndex, match.index);
+    parts.push(escapeLatexChars(textBefore));
+
+    // Add the code block/inline code as-is (no escaping)
+    parts.push(match[0]);
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add any remaining text after the last code block (with escaping)
+  if (lastIndex < content.length) {
+    parts.push(escapeLatexChars(content.slice(lastIndex)));
+  }
+
+  return parts.join('');
+}


This escaping approach breaks all legitimate LaTeX math rendering. By escaping ALL dollar signs outside code blocks, users can no longer write math equations like $x^2 + y^2$ or $$\int_0^1 f(x)dx$$. This defeats the purpose of having remarkMath and rehypeKatex plugins enabled. The real solution should distinguish between intentional math delimiters and accidental ones, or remove the math plugins if they cause more problems than they solve.

Copilot · 2025-12-17T23:06:25Z

ui/desktop/src/components/MarkdownContent.tsx

+    .replace(/\\/g, '\\\\')  // Escape backslashes first
+    .replace(/_/g, '\\_')     // Escape underscores
+    .replace(/\$/g, '\\$');   // Escape dollar signs
+}
+


Escaping backslashes will break existing escaped characters in markdown. For example, if the original content has \* (escaped asterisk to prevent bold), this will become \\* after escaping, which renders as a literal backslash followed by bold formatting. This could corrupt user content that already contains legitimate backslash escapes.

Suggested change

.replace(/\\/g, '\\\\') // Escape backslashes first

.replace(/_/g, '\\_') // Escape underscores

.replace(/\$/g, '\\$'); // Escape dollar signs

}

.replace(/_/g, '\\_') // Escape underscores

.replace(/\$/g, '\\$'); // Escape dollar signs

}

Copilot AI review requested due to automatic review settings December 17, 2025 23:02

Copilot started reviewing on behalf of alex-ameen December 17, 2025 23:03 View session

Copilot AI reviewed Dec 17, 2025

View reviewed changes

alex-ameen closed this Dec 18, 2025

zanesq mentioned this pull request Dec 19, 2025

issues with LaTeX rendering in agent response #6196

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix LaTeX UI rendering for shell code #6162

Fix LaTeX UI rendering for shell code #6162

Uh oh!

alex-ameen commented Dec 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Copilot AI Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Fix LaTeX UI rendering for shell code #6162

Fix LaTeX UI rendering for shell code #6162

Uh oh!

Conversation

alex-ameen commented Dec 17, 2025

Summary

Type of Change

AI Assistance

Testing

Related Issues

Screenshots/Demos (for UX changes)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant