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:

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.