Installation

Let us get you started with using React Highlight Syntax (opens in a new tab). Choose the type of installation that fits your need.

npm install --save react-highlight-syntax

Basic usage

To quickly get started, here is a basic usage of the package.

App.tsx

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>
  );
);
 
export default App;

Custom component

You can make your own custom component. Here is an example:

SyntaxHighlighter.tsx

import React, { FC } from 'react';
 
import ReactHighlightSyntax, {
  Language,
  Theme,
  CopyBtnTheme,
} from 'react-highlight-syntax';
 
type Props = {
  language: Language;
  theme?: Theme;
  copy?: boolean;
  copyBtnTheme?: CopyBtnTheme;
  children: string;
};
 
const SyntaxHighlighter: FC<Props> = (props) => {
  const {
    language,
    theme = 'Base16Darcula',
    copy = true,
    copyBtnTheme = 'Dark',
    children,
  } = props;
  return (
    <ReactHighlightSyntax
      language={language}
      theme={theme}
      copy={copy}
      copyBtnTheme={copyBtnTheme}
    >
      {children}
    </ReactHighlightSyntax>
  );
};
 
export default React.memo(SyntaxHighlighter);

Introduction Props