diff --git a/README.md b/README.md index bd8c349..3404471 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,63 @@ # markdown2png -A simple TypeScript tool that converts Markdown files to PNG images using Puppeteer. +A web-based tool built with Next.js that converts Markdown files to PNG images with GitHub-style formatting. + +## Features + +- Browser-based Markdown to PNG conversion +- GitHub-style syntax highlighting +- Live preview +- High-quality PNG output + +## Tech Stack + +- Next.js 13.5 +- React 18 +- TypeScript +- TailwindCSS +- marked (for Markdown parsing) +- highlight.js (for syntax highlighting) +- html-to-image (for PNG conversion) ## Requirements -- Node +- Node.js - yarn ## Installation +1. Clone the repository: +```bash +git clone https://github.com/riccardosenica/markdown2png.git +cd markdown2png +``` + +2. Install dependencies: ```bash yarn ``` -## Commands +## Development + +To run the development server: ```bash -yarn dev PATH_TO_FILE.md +yarn dev ``` -The output PNG file is in the `output` folder. +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +## Available Scripts + +- `yarn dev` - Runs the development server +- `yarn build` - Creates a production build +- `yarn start` - Runs the production server +- `yarn lint` - Runs ESLint +- `yarn format` - Formats code with Prettier +- `yarn typecheck` - Runs TypeScript type checking + +## Usage + +1. Upload your Markdown (.md) file using the file input +2. Preview your formatted Markdown with syntax highlighting +3. Click "Convert to PNG" to download your image