Code Block Client with Sugar High

Preview

Code Block + Sugar High

console.log('Hello, world!');

Preparing...

Installation

shadcn/ui

shadcn/ui Command

pnpm dlx shadcn@latest add https://code-blocks.pheralb.dev/r/client-sugar-high.json

Manual

Before creating the component, make sure you have the basic structure:

reactCode Block

The main structure of the Code Block component with header and content areas.

Create your Sugar High highlighter utility:

sugar-highSugar-High Highlighter

The main highlighter utility to render syntax highlighted code.

Create the Code Block Client component:

.tsx

"use client";

import type { ComponentProps } from "react";

import { cn } from "@/utils/cn";
import { highlight } from "@/utils/sugar-high/highlight";

interface CodeBlockSugarHighProps extends ComponentProps<"pre"> {
  code: string;
  lineNumbers?: boolean;
}

const CodeBlockSugarHigh = ({
  code,
  className,
  lineNumbers = false,
  ...props
}: CodeBlockSugarHighProps) => {
  const highlightedHtml = highlight({
    code,
  });

  return (
    <pre
      className={cn(
        "w-full overflow-x-auto font-mono",
        "p-3",
        lineNumbers && "sh-line-numbers",
        className,
      )}
      {...props}
    >
      <code dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
    </pre>
  );
};

export { CodeBlockSugarHigh };

Usage

Now you can use the CodeBlockSugarHigh into your CodeBlockContent component:

.tsx

import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockHeader,
  CodeBlockGroup,
  CodeBlockIcon,
} from "@/components/code-block";
import { CopyButton } from "@/components/code-block/copy-button";
import { CodeblockSugarHigh } from "@/components/code-block/client/sugar-high";

<CodeBlock>
  <CodeBlockHeader>
    <CodeBlockGroup>
      <CodeBlockIcon language="ts" />
      <span>Code Block + Sugar High</span>
    </CodeBlockGroup>
    <CopyButton content={code} />
  </CodeBlockHeader>
  <CodeBlockContent>
    <CodeblockSugarHigh code="console.log('Hello, world!');" />
  </CodeBlockContent>
</CodeBlock>;

Props

React Props

Prop	Type	Required
code	string	Yes
lineNumbers	boolean	No
Included: DOMAttributes<HTMLDivElement>