React Router Server Components + Syntax-Highlighting is working

#coding #vibecoding #react #webdev

Recently, React Router introduced experimental support for Server Side Components, and I'm excited about how this will simplify syntax highlighting in my Docs Framework project.

I've been looking forward to this feature because xyd's codebase! is still using the old approach. Soon, syntax highlighting will be much easier and cleaner.

However, it's actually quite simple to implement right now:

import { highlight, Pre } from "codehike/code"

export async function CodeSnippet() {
  const codeblock = `
export async function HomePage() {
  const data = await fetchData()

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  )
}
`
  const highlighted = await highlight({
    value: codeblock,
    lang: "tsx",
    meta: "Server Component",
  }, "github-dark")

  return <Pre code={highlighted} />
}