Futuristic coding space with holographic screens showing colorful syntax-highlighted code, centered around a glowing React logo

Code Glamour: React Syntax Highlighter Adds Sparkle to Your Snippets

The Orange Cat
The Orange Cat

React Syntax Highlighter is a popular React component that provides syntax highlighting for code snippets. It offers a flexible and customizable way to display formatted code within React applications. This article will guide you through its installation, basic usage, and various customization options.

Installation

To use React Syntax Highlighter, you can install it via npm or yarn:

npm install react-syntax-highlighter

Basic Usage

The simplest way to use React Syntax Highlighter is to import it and pass your code as children:

import SyntaxHighlighter from 'react-syntax-highlighter';

const Component = () => {
  const codeString = '(num) => num + 1';
  return <SyntaxHighlighter>{codeString}</SyntaxHighlighter>;
};

Customization Options

React Syntax Highlighter provides several props for customization:

Style

You can apply different highlighting styles by importing them from the styles directory:

import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

<SyntaxHighlighter style={docco}>
  {codeString}
</SyntaxHighlighter>

Language

Specify the language for syntax highlighting:

<SyntaxHighlighter language="javascript">
  {codeString}
</SyntaxHighlighter>

Line Numbers

Enable line numbers with the showLineNumbers prop:

<SyntaxHighlighter showLineNumbers={true}>
  {codeString}
</SyntaxHighlighter>

Custom Styling

You can override default styles using the customStyle prop:

<SyntaxHighlighter customStyle={{padding: '20px'}}>
  {codeString}
</SyntaxHighlighter>

Advanced Features

React Syntax Highlighter offers several advanced features for more complex use cases:

Prism Support

For those who prefer Prism.js for syntax highlighting:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

<SyntaxHighlighter language="javascript" style={dark}>
  {codeString}
</SyntaxHighlighter>

Light Build

For a smaller footprint, you can use the light build and manually register languages:

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';

SyntaxHighlighter.registerLanguage('javascript', js);

Async Build

An async version is available for optimal bundle size:

import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';

Additional Customization

React Syntax Highlighter provides even more options for fine-tuning your code display:

  • wrapLines: Wrap each line of code in a parent element for line-level customization.
  • wrapLongLines: Control whether long lines should wrap or overflow.
  • lineProps: Apply custom props to each line when wrapLines is true.
  • renderer: Use a custom renderer for more control over how lines are displayed.
  • PreTag and CodeTag: Customize the outermost and second-level tags of the component.

These options allow you to create highly tailored code displays that fit perfectly within your application’s design.

Conclusion

React Syntax Highlighter is a powerful tool for displaying formatted code in React applications. Its flexibility and extensive customization options make it suitable for a wide range of projects, from documentation sites to code editors and presentation tools. By leveraging its features, developers can enhance the readability and visual appeal of code snippets in their React-based projects, turning plain text into beautifully highlighted and formatted code that’s a joy to read and understand.

Comments