UniqueDocs

Code Block

Code blocks are a fundamental part of technical documentation. This template uses a custom component that wraps react-syntax-highlighter to provide beautiful, themed code blocks.

Features

Syntax highlighting for dozens of languages.
Copy-to-clipboard button on hover.
Language display on hover.
Themed for both light and dark modes.

JavaScript Example

Hover over the code block to see the "Copy" button and language indicator.

function factorial(n) {
  if (n < 0) {
    return "Factorial is not defined for negative numbers";
  }
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120

TypeScript / TSX Example

The component correctly identifies and highlights TSX syntax.

import React from 'react';

const MyComponent = ({ name }: { name: string }) => {
  return (
    <div className="p-4 bg-blue-100 rounded-lg">
      <h1 className="text-xl font-bold">Hello, {name}!</h1>
      <p>This is a React component in a code block.</p>
    </div>
  );
};

export default MyComponent;

Shell / Bash Example

Commands for the terminal are also supported.

# Update package lists
sudo apt-get update

# Install a new package
sudo apt-get install my-package

# Check the version
my-package --version

No Language Specified

If you don't specify a language, it defaults to a plain text style.