Code Block

A lightweight React component based on SHIKI that provides syntax highlighting using Shiki with built-in copy functionality. Perfect for displaying code snippets in documentation, blogs, and developer tools with dark/light theme support.

TypeScript Example

CSS Example

Python Example

Installation

npx uilayouts@latest add shiki-code

Usage

import { ShikiCode } from '@/components/ui/shiki-code';

export default function MyComponent() {
  const code = `function hello() {
  console.log('Hello, World!');
}`;

  return (
    <ShikiCode 
      code={code} 
      lang="javascript" 
      className="my-4"
    />
  );
}

API Reference

Props

PropTypeDefaultDescription
codestringRequiredThe code string to highlight
langstring'tsx'Programming language for syntax highlighting
classNamestringundefinedAdditional CSS classes for styling

Supported Languages

The component supports all languages that Shiki supports, including:

  • javascript, typescript, tsx, jsx
  • python, java, c, cpp, csharp
  • html, css, scss, sass
  • json, yaml, toml, xml
  • markdown, mdx
  • bash, shell, powershell
  • And many more...
Image AccordionTree Code Viewer