Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-syntax-highlighter

Package Overview
Dependencies
Maintainers
3
Versions
124
Alerts
File Explorer

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
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
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

Keywords

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc