React Highlight Syntax

https://react-highlight-syntax.vercel.app/

React Highlight Syntax is a React component that highlights syntax in a code block.

Installation

# npm
npm install --save react-highlight-syntax

# yarn
yarn add react-highlight-syntax

# pnpm
pnpm add react-highlight-syntax

Usage

import React from 'react';
import ReactHighlightSyntax from 'react-highlight-syntax';

const code = `const foo = 'bar';`;

const App = () => (
  return (
  <ReactHighlightSyntax 
    language={'JavaScript'}
    theme={'Base16Darcula'}
    copy={true}
    copyBtnTheme={'Dark'}
  >
    {code}
  </ReactHighlightSyntax>
  );
);

Props

• tag: The tag name of the code block, default: div.
• language: the language to highlight code in. Available options are here.
• theme: the theme to use for highlighting. Available options are here.
• copy: whether to show the copy button, default: false.
• copyBtnTheme: the theme to use for the copy button. Available options are Light and Dark, default: Light.

Supported Languages

Supported Themes

License

react-highlight-syntax is licensed under the MIT License.

Created with ♥ by @MKAbuMattar.