Inline Code - Code Blocks

Preview

console.log('Hello, World!')

Preparing...

Installation

shadcn/ui

shadcn/ui Command

pnpm dlx shadcn@latest add https://code-blocks.pheralb.dev/r/block-inline-code.json

Manual

Set up the following components:

reactCopy Button

A button component to copy content to the clipboard.

reactCode Block Client with Shiki

Create a client-side Code Block component using Shiki for syntax highlighting.

Create the Inline Code Block component:

.tsx

"use client";

import type { Languages } from "@/utils/shiki/highlight";

import {
  CodeBlock,
  CodeBlockContent,
} from "@/components/code-block/code-block";
import { CopyButton } from "@/components/code-block/copy-button";
import { CodeblockShiki } from "@/components/code-block/client/shiki";

interface InlineCodeProps {
  code: string;
  language?: Languages;
}

const InlineCode = ({ code, language = "bash" }: InlineCodeProps) => {
  return (
    <CodeBlock>
      <CodeBlockContent className="flex w-full items-center justify-between">
        <CodeblockShiki language={language} code={code} />
        <CopyButton className="px-3" content={code} />
      </CodeBlockContent>
    </CodeBlock>
  );
};

export default InlineCode;