@toolsify/highlight

A lightweight and customizable syntax highlighting library built on top of Mantine's code highlight component. It provides pre-configured components and utilities for seamless integration into React applications.

Features

Mantine Integration: Built on top of @mantine/code-highlight for robust and flexible syntax highlighting.
Customizable: Easily customize syntax highlighting styles and behavior to fit your application's needs.
TypeScript Support: Fully typed for a better developer experience.
Lightweight: Minimal dependencies for fast and efficient performance.

Installation

Install the library using pnpm, npm, or yarn:

# Using pnpm
pnpm add @toolsify/highlight

# Using npm
npm install @toolsify/highlight

# Using yarn
yarn add @toolsify/highlight

Peer Dependencies

Make sure the following peer dependencies are installed in your project:

react
react-dom
@toolsify/core

You can install them using:

pnpm add react react-dom @toolsify/core

Usage

1. Basic Syntax Highlighting

Use the @toolsify/highlight library to create a basic syntax highlighting component in your React application.

import React from "react";
import { CodeHighlight } from "@toolsify/highlight";

const App = () => {
  return (
    <CodeHighlight language="javascript">
      {`const greet = () => console.log("Hello, World!");`}
    </CodeHighlight>
  );
};

export default App;

2. Customizing Syntax Highlighting

You can customize the syntax highlighting styles and behavior by passing props.

import React from "react";
import { CodeHighlight } from "@toolsify/highlight";

const App = () => {
  return (
    <CodeHighlight
      language="typescript"
      withLineNumbers
      highlightLines={[2]}
    >
      {`const greet = () => {
  console.log("Hello, World!");
};`}
    </CodeHighlight>
  );
};

export default App;

3. Using Types

The library re-exports types from @mantine/code-highlight for better type safety.

import React from "react";
import { CodeHighlightProps } from "@toolsify/highlight";

const CustomCodeHighlight = (props: CodeHighlightProps) => {
  return <CodeHighlight {...props} />;
};

export default CustomCodeHighlight;

License

This project is licensed under the MIT License.