vite-gist
v2.1.0
Published
A React component to view GitHub Gists with support for light and dark modes.
Downloads
41
Maintainers
Readme
Github Gist Viewing Package.
🙏 DONATE ❤️
THIS PACKAGE YOU CAN USE IN YOUR REACT PROJECT
Install
npm i vite-gist
user need to install - npm install react-syntax-highlighter
- user will also need to apply on react project tailwindcss
import React from 'react';
import {GistViewer} from 'vite-gist';
const App = () => (
<GistViewer
gistId="ca470df8811bcb90a37ab2233861bb04"
containerClassName="bg-white dark:bg-black p-1"
buttonClassName=" text-black dark:text-white dark:bg-black mx-2 p-1 rounded-md"
fontSizeButtonContainerClassName="flex justify-between px-8"
toggleButtonClassName="text-xl dark:text-white dark:bg-black p-1 rounded-md"
loaderClassName="text-center p-3 m-2 font-bold text-xl text-gray-600 dark:text-white"
codeContainerClassName="p-4 rounded-md"
themeStyle={null}
showLineNumbers={true}
fontSize="1rem"
codeBackgroundColor="#f5f5f5"
/>
);
npm i vite-gist@latest
npm i [email protected]
1. You Must Be Apply in Your React Project tailwindcss then can you also handle the design
2. Install react-icons
2 Install react-syntax-highlighter
You Need TO Install Use Tailwind Css in your project then will work properly design