Shiki Code

A lightweight React component 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

import React from 'react';

function MyComponent() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default MyComponent;

Python Example

def fibonacci(n):
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Example usage
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")

CSS Example

.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

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