feat(`Messages.tsx`): Implement syntax highlighting with `react-syntax-highlighter`

AVGVSTVS96 / astroSite

Built with Astro and TailwindCSS, this MPA portfolio & blog site is version 3 of my personal website, my first MPA.

https://astrosite-aid.pages.dev/

GNU Affero General Public License v3.0

0 stars 0 forks source link

Closed AVGVSTVS96 closed 1 month ago

AVGVSTVS96 commented 1 month ago

chore(deps): Add react-syntax-highlighter and it's @types
feat(Messages.tsx): Implement syntax highlighting
- Use Prism and react-syntax-highlighter to implement syntax highlighting for LLM chat messages
- Use atomDark theme for syntax highlighting
- Add CodeComponentProps interface to define the props for the CodeComponent
Refactor Messages.tsx and update theme
- Separate SyntaxHighlighter to it's own component
- Set theme to nightOwl
- Organize message styles using cn() and styles variables
- Update CodeComponentProps interface, remove optional(?) from required props

cloudflare-pages[bot] commented 1 month ago

Latest commit:	`e9c3f75`
Status:	✅ Deploy successful!
Preview URL:	https://05a1d152.astrosite-aid.pages.dev
Branch Preview URL:	https://reactsyntaxhighlighter-bas-1.astrosite-aid.pages.dev

linear[bot] commented 1 month ago

codesandbox[bot] commented 1 month ago

Open the branch in Web Editor • VS Code • Insiders
Open Preview

AVGVSTVS96 commented 1 month ago

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @AVGVSTVS96 and the rest of your teammates on Graphite

AVGVSTVS96 commented 1 month ago

May 31, 5:56 AM EDT: @AVGVSTVS96 started a stack merge that includes this pull request via Graphite.
May 31, 5:56 AM EDT: @AVGVSTVS96 merged this pull request with Graphite.