Gist-viewer-vue NPM

📦 Gist Viewer Vue

Easily embed and display GitHub Gists in your Vue applications with syntax highlighting, line numbers, and a responsive design.

🚀 Features

Responsive Design: Each file is scrollable horizontally for better readability.
Syntax Highlighting: Beautiful syntax highlighting for all major programming languages.
Line Numbers: Displays line numbers alongside your Gist content.
Customizable: Built with Tailwind CSS, easy to style and customize.
TypeScript Support: Fully typed and compatible with TypeScript.

📥 Installation

Install the package via npm or yarn:

npm install gist-viewer-vue

yarn add gist-viewer-vue

🛠️ Usage

1. Global Registration

import { createApp } from "vue";
import App from "./App.vue";
import GistViewer from "gist-viewer-vue";

const app = createApp(App);

app.use(GistViewer); // Registers the plugin globally
app.mount("#app");

You can now use the <GistViewer> component anywhere in your app.

2. Local Registration

To use it in a specific component, import it locally:

<script setup lang="ts">
import GistViewer from "gist-viewer-vue";
</script>

<template>
  <GistViewer gistUrl="https://gist.github.com/your-username/your-gist-id" />
</template>

⚙️ Props

Props	Type	Required	Default	Description
`gistUrl`	`string`	✅	`null`	The URL of the GitHub Gist you want to display.

📚 Example

Here's an example of using the GistViewer component:

<template>
  <div>
    <h1>My GitHub Gist</h1>
    <GistViewer gistUrl="https://gist.github.com/your-username/your-gist-id" />
  </div>
</template>

<script setup lang="ts">
import GistViewer from "gist-viewer-vue";
</script>

🎨 Customization

Using Tailwind CSS

This package uses Tailwind CSS for styling. You can customize the styles by modifying your Tailwind configuration or overriding the default styles.

🧪 Development & Contribution

We welcome contributions! Follow these steps to set up the package locally:

Clone the repository:

	```bash
	git clone https://github.com/darshitdudhaiya/gist-viewer-vue.git
	```

Install dependencies:
```
	```bash
	npm install
	```
```
Run the development server:
```
	```bash
	npm run dev
	```
```

🤝 Contributing

We love contributions from the community! To contribute to this project, follow these guidelines:

Steps to Contribute

Fork the Repository: Click the "Fork" button on the repository page.

Clone Your Fork: Clone the repository to your local machine:

git clone https://github.com/your-username/gist-viewer-vue.git

Create a Branch: Create a new branch for your feature or fix:
```
git checkout -b my-feature-branch
```
Make Changes: Implement your changes in the codebase.
Commit Changes: Commit your changes with a clear and concise message
```
git commit -m "Add feature: XYZ"
```
Push Changes: Push your branch to your fork:
```
git push origin my-feature-branch
```
Submit a Pull Request: Go to the original repository and open a Pull Request. Provide details about the changes you made.