Skip to content

Add syntax highlighting and copy button to code blocks#501

Open
Irozuku wants to merge 1 commit intodevelopfrom
feat/copy-code-generative
Open

Add syntax highlighting and copy button to code blocks#501
Irozuku wants to merge 1 commit intodevelopfrom
feat/copy-code-generative

Conversation

@Irozuku
Copy link
Collaborator

@Irozuku Irozuku commented Mar 25, 2026

Summary

Enhances the code display experience in the TextMessage component by adding syntax highlighting for markdown code blocks and a copy-to-clipboard feature.

image

Type of Change

Check all that apply like this [x]:

  • Backend change
  • Frontend change
  • CI / Workflow change
  • Build / Packaging change
  • Bug fix
  • Documentation

Changes (by file)

  • TextMessage.jsx: Added syntax highlighting for code blocks using react-syntax-highlighter, including dynamic theming for dark/light modes. Implemented a CopyButton component to allow copying code snippets with visual feedback.
  • package.json: Added react-syntax-highlighter dependency.

Testing (optional)

  • Verify that code blocks render with proper syntax highlighting in both dark and light modes.
  • Ensure the copy button correctly copies code to the clipboard and provides visual feedback.

Add syntax highlighting and a copy-to-clipboard button for code blocks in markdown messages, improving readability and usability for users viewing code outputs or snippets.
@Irozuku Irozuku added front Frontend work enhancement New feature or request labels Mar 25, 2026
@Irozuku Irozuku requested a review from Creylay March 25, 2026 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request front Frontend work

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant