🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-syntax-highlighter

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-syntax-highlighter

syntax highlighting component for react with prismjs or highlightjs ast using inline styles

15.6.1
latest
Version published
Weekly downloads
2.7M
2.79%
Maintainers
3
Weekly downloads
 
Created

What is react-syntax-highlighter?

The react-syntax-highlighter package is a lightweight syntax highlighter for React applications. It provides a simple and easy way to display code snippets with syntax highlighting in your React projects. It supports a wide range of programming languages and comes with a variety of customizable styles.

What are react-syntax-highlighter's main functionalities?

Syntax Highlighting

This feature allows you to highlight syntax of code snippets in your React components. You can specify the language and the style theme for the highlighting.

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

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

Custom Styles

This feature allows you to customize the styles applied to the code block. You can modify existing styles or create your own.

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

const customStyle = {
  ...style,
  lineHeight: '1.5',
  margin: '20px',
  borderRadius: '10px'
};

const Component = () => {
  const codeString = 'const addOne = (num) => num + 1;';
  return (
    <SyntaxHighlighter language='javascript' style={customStyle}>
      {codeString}
    </SyntaxHighlighter>
  );
};

Inline Code Highlighting

This feature allows you to highlight inline code snippets within a block of text, which can be useful for tutorials, documentation, or any application where inline code highlighting is needed.

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

const Component = () => {
  const codeString = 'num => num + 1';
  return (
    <p>
      This is an inline code snippet: 
      <SyntaxHighlighter language='javascript' style={dark} customStyle={{ display: 'inline' }}>
        {codeString}
      </SyntaxHighlighter>
    </p>
  );
};

Other packages similar to react-syntax-highlighter

FAQs

Package last updated on 16 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts