React-prismjs-component NPM

Features

🔍 Syntax Highlighting: Real-time code highlighting using PrismJS
🎨 Multiple Themes: Supports 7 built-in themes (dark and light both themes)
📝 Language Support: Out-of-the-box support for 25+ programming languages
📋 Copy to Clipboard: Built-in code copying functionality
🔢 Line Numbers: Integrated line numbering support
🖼️ Custom Icons: Ability to customize file icons for different languages
⚡ Dynamic Loading: Lazy loads language and theme files for better performance
🎯 Error Handling: Built-in error boundaries for theme and language loadingfeedback

Installation

npm i react-prismjs-component

Usage

Here's a quick example of how to use the library:

import CodeSnippet from "react-prismjs-component";

function App() {
    const sampleCode = `console.log('Hello World');`;

    return (
        <div>
            <CodeSnippet
                code={sampleCode}
                language="javascript"
                theme="okaidia"
                codeIcon="/path/to/icon.svg"
                width="1000px"
            />
        </div>
    );
}

export default App;

Props for CodeSnippet

Prop Name	Type	Default	Description
`code`	string	Required	The code snippet to display.
`language`	string	`markup`	The programming language for syntax highlighting.
`theme`	string	`default`	The theme to use for syntax highlighting.
`codeIcon`	string	`null`	Path to a custom icon for the code file.
`width`	string	`800px`	Width of the CodeSnippet component.