code-highlighter-react v0.3.0

Code Highlighter React

Overview

This is a React code highlighter package designed to make it easy to implement code highlighting in your React applications. The package is written in TypeScript and utilizes Styled Components for flexible and customizable styling. The core highlighting is based on the react-syntax-highlighter package.

Features

• Switch themes: Switch between a dark and a light theme.
• Highlight lines: Highlight specific lines (added, removed, marked).
• Custom config for formatting: Format the code with a custom Prettier config.
• Copy code: Copy the code with a dedicated button.

Installation

npm install code-highlighter-react

Usage

Basic example

import React from 'react';
import { CodeHighlighter, CodeHighlighterTheme } from 'code-highlighter-react';

const code = `const greeting = 'Hello, World!';`;

const MyComponent = () => {
  return (
      <CodeHighlighter
          code={code}
          language="tsx"
          shouldShowLineNumbers
          theme={CodeHighlighterTheme.Dark} 
      />
  );
};

export default MyComponent;

Highlighted lines

import React from 'react';
import { CodeHighlighter, CodeHighlighterTheme } from 'code-highlighter-react';

const code = `const greeting = 'Hello, World!';`;

const highlightedLines = {
    added: [2,3,4],
    removed: [5,6],
    marked: [10]
}

const MyComponent = () => {
  return (
      <CodeHighlighter
          code={code}
          highlightedLines={highlightedLines}
          language="tsx"
          shouldShowLineNumbers
          theme={CodeHighlighterTheme.Dark} 
      />
  );
};

export default MyComponent;

Props