react-prismjs-component

ReactJs + PrismJs

PrismJs Component Library to render Syntax Highlighting for Code Snippets in ReactJs

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

Table of Contents

• Features
• Installation
• Usage
• Props for CodeSnippet
• Supported Themes
• Supported Languages
• Contributing
• Credits
• License

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.

Supported Themes

The following themes are supported:

• okaidia
• tomorrow
• dark
• default
• twilight
• coy
• solarizedlight

To apply a theme, pass its name to the theme prop.

Supported Languages

The following languages are supported out of the box:

JavaScript	Python	Java	CSS	HTML	TypeScript	JSX
C++	C#	PHP	Ruby	Swift	Rust	Go
Scala	Kotlin	SQL	Bash	PowerShell	Docker	YAML
JSON	Markdown	Dart	GraphQL	Lua	Perl	R

Pass the language name (in lowercase) to the language prop.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature (git checkout -b feature-name).
3. Commit your changes (git commit -m "Add some feature").
4. Push to the branch (git push origin feature-name).
5. Open a pull request.

Credits

• PrismJs
• ReactJs

License

This library is licensed under the MIT License.