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.