snippy-copy v0.0.4

SnippyCopy

SnippyCopy is a lightweight JavaScript library that allows you to display code snippets with syntax highlighting and a customizable copy-to-clipboard button. It supports different themes, customizable button styles, and error messages. Perfect for blogs, tutorials, and technical documentation pages!

Installation

Install SnippyCopy via npm:

npm install snippy-copy

Usage

Here is an example of how to use SnippyCopy with all available options:

import SnippyCopy from 'snippy-copy';

const code = `const greet = () => { console.log('Hello, World!'); };`;

new SnippyCopy('#snippet-container', code, 'javascript', {
    noCopy: false,
    highlight: true,
    theme: 'dark',
    copyButtonText: 'Copy',
    copyButtonStyle: {backgroundColor: '#27ae60', color: 'white', fontSize: '16px'},
    errorMessage: 'Unable to copy the code',
    caption: 'JavaScript Code Example',
});

Add the corresponding HTML element:

<div id="snippet-container"></div>

Options

Main Parameters

options Object

✨ Example Usage

new SnippyCopy('#snippet-container', `const sum = (a, b) => a + b;`, 'javascript', {
    noCopy: false,
    highlight: true,
    theme: 'dark',
    copyButtonText: 'Copy',
    copyButtonStyle: {backgroundColor: '#3498db', color: 'white', fontSize: '14px'},
    errorMessage: 'Unable to copy the code',
    caption: 'Simple Sum Function',
    showLineNumbers: true,
    highlightLineNumbers: [1],
    highlightLineColor: '#ff6347'
});

Add the corresponding HTML container:

<div id="snippet-container"></div>

🤝 Contributing

Thank you for your interest in SnippyCopy! 🚀

🛠 Setting up the project locally

1. Fork this repository and clone it locally:

   git clone https://github.com/your-username/snippy-copy.git

2. Navigate to the project folder:

   cd snippy-copy

3. Install dependencies:

   npm install

4. Start the development environment:

   npm run dev

🚀 How to contribute

1. Create a branch for your feature or bug fix:

   git checkout -b feature/add-new-functionality

2. Make your changes and test them.
3. Commit your changes with a meaningful message:

   git commit -m "✨ Added new functionality X"

4. Push your branch:

   git push origin feature/add-new-functionality

5. Open a Pull Request (PR) on GitHub. 🎉

✅ Code style & best practices

• Follow naming conventions (camelCase for variables, kebab-case for file names).
• Ensure all tests pass before submitting a PR:

  npm test

🛠 Reporting Issues

If you find a bug or have an idea for improvement, please open an issue on GitHub! 🐛✨

📜 License

MIT License