Tokenized Line

Single-line snippet with keywords, strings, and function names colored by semantic token kind.

const user = await fetchUser("42");

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Code5 } from "@/components/beste/piece/code5";

<Code5
  tokens={[
    {
      "kind": "keyword",
      "text": "const"
    },
    {
      "kind": "plain",
      "text": " "
    },
    {
      "kind": "var",
      "text": "user"
    },
    {
      "kind": "plain",
      "text": " = "
    },
    {
      "kind": "keyword",
      "text": "await"
    },
    {
      "kind": "plain",
      "text": " "
    },
    {
      "kind": "fn",
      "text": "fetchUser"
    },
    {
      "kind": "punct",
      "text": "("
    },
    {
      "kind": "string",
      "text": "\"42\""
    },
    {
      "kind": "punct",
      "text": ");"
    }
  ]}
/>