vite-gist

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 vite-gist@1.4.0

  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