fix: shiki -> react-syntax-highlighter

epoll31 commented 2 months ago

Description

using react-syntax-highlighter in Code now / ComponentPreview references Code again / customizable prism theme

Related Issue

Fixes #135

Proposed Changes

Using react-syntax-highlighter instead of codeToHtml in src/components/code/Code.tsx
Using Code instead of react-syntax-highlighter in src/components/code/ComponentPreview.tsx to only reference react-syntax-highlighter in one place
react-syntax-highlighter uses a theme defined in src/components/code/theme.ts
- theme is based on css variables in src/styles/tailwind.css
- available tokens are defined at https://prismjs.com/tokens.html

Screenshots

Checklist

Please check the boxes that apply:

[x] I have tested the changes locally
[x] I ran npm run build and build is successful
[x] I have added necessary documentation (if applicable)
[x] I have updated the credits.md file (if applicable)

vercel[bot] commented 2 months ago

@epoll31 is attempting to deploy a commit to the SyntaxUI Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 2 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syntax-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 3, 2024 6:13pm

Ansub commented 2 months ago

what are these useMemo() doing?

epoll31 commented 2 months ago

what are these useMemo() doing?

I used them to avoid performing those string mutations on rerenders. They are pretty simple so I don't think that they are vital, but I thought it would be better with them.

Specifically, the code one trims the extra white space and newlines. And, the language one removes "language-" from the language or returns "plaintext" when no language specified

SyntaxUI / syntaxui