react-perfect-syntax-highlighter

🌈 Perfect syntax highlighter for React using server components.

Installation

npm install react-perfect-syntax-highlighter

Usage

import { CodeBlock } from "react-perfect-syntax-highlighter";

export default function Page() {
  return (
    <CodeBlock lang="tsx" theme="dracula-soft" code="const meaning = 40 + 2;" />
  );
}

API

CodeBlock

A react component that will render a code block with syntax highlighting using the given language and theme.

Props

| Name | Type | Description | | ----------- | ------------------- | ------------------------------------------------- | | code | string | The code to highlight. | | theme | string | The theme to use. See Themes. | | lang | string | The language to use. See Languages. | | className | string (optional) | A class to apply to the code block. |

Themes

A theme is a set of colors that will be used to highlight the code.

The list of themes is available here.

Languages

A language is a set of rules that will be used to tokenize the code.

The list of languages is available here.