new <CodeBlock /> react component

[julianbenegas]

it's curretly way too hard to add a code snippet into your website. choosing the syntax highlighter is the worse.

I suggest: an Async Server Component which uses shikiji to highlight code, well integrated with BaseHub's API for code snippet blocks, and which exposes primitives (potentially ala radix, or ala our RichText) to:

• have line numbers
• have file names
• have "copy code" button
• highlight specific lines

RichText style is more fit for syntax highlighting because the code follows a strict order.

An initial api design could be something like this:

<CodeSnippet.Root language="" theme="" code={code}>
  <header>
     <p>filename.tsx</p>
     <CodeSnippet.CopyButton>Copy to clipboard</CodeSnippet.CopyButton>
  </header>
  <pre>
    <CodeSnippet.Highlighter components={{
      line: ({ children, number, isHighlighted }) => <span>{}</span>,
      token: ({ type, children, style }) => {
        // type can be "keyword", "string", "comment", etc... see how they do it in https://prismjs.com/
        return <span style={style}>{children}</span>
      }
    }} />
  </pre>

</CodeSnippet.Root>

<CodeSnippet.Highlighter>'s components are optional. If you set theme, they'll come with styles, and you're always free to add your own if you want.
you can do <CodeSnippet.Root language="" theme="" code={code} highlightedLines={[1, 4]} /> alone and it should work i guess. Meaning, if no children sent, will render default Highlighter.

[julianbenegas]

done